바닐라 JavaScript를 사용하여 요소에서 클래스를 제거하는 방법

HTML 요소에서 클래스를 제거하는 것은 JavaScript classList 속성의 remove()를 사용하면 간단합니다. 방법. 요소에 클래스를 추가하는 방법을 이미 읽었다면 클래스를 제거하는 것이 완전히 같은 방식이며 역순이라는 것을 알게 될 것입니다.

먼저 일반 classList.remove() 수식을 살펴보고 실용적인 예를 살펴보겠습니다.

var element = document.querySelector("selector")
element.classList.remove("class")

위의 일반적인 예에서 첫 번째 HTML 요소를 찾습니다. 지정된 선택기 이름이 있는 페이지에서 (요소 선택기, 클래스 선택기 등이 될 수 있음) 변수와 함께 참조를 저장합니다.

그런 다음 classList 속성을 remove() 메서드를 요소 개체(변수)에 추가하고 제거하려는 클래스를 지정합니다.

클래스를 찾고 제거하려면 클래스가 있는 요소를 찾아야 합니다.

그렇다면 어떤 클래스를 제거해야 할까요?

우리의 삶을 더 쉽게 만들기 위해 방금 italic라는 클래스를 추가했습니다. 당신이 읽고있는 단락에. 보시다시피 텍스트를 기울임꼴로 만듭니다.

새로 발견된 classList.remove 기술을 사용하여 위의 단락을 "기울임 해제"해 보겠습니다.

var firstParagraph = document.querySelector(".italic")
firstParagraph.classList.remove("italic")

결과:

참고:italic이 있습니다. 내 웹사이트의 CSS 스타일시트에 있는 클래스가 작동하는 이유입니다. 클래스는 다음과 같습니다.

.italic {
  font-style: italic;
}