바닐라 JavaScript를 사용하여 요소에 클래스를 추가하는 방법

JavaScript의 classList 속성 메서드인 add()를 사용할 때 HTML 요소에 클래스를 추가하는 것은 간단합니다. . 먼저 일반 공식을 간략히 살펴보고 실용적인 예를 살펴보겠습니다.

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

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

그런 다음 classList 속성을 add() 메소드를 요소에 추가하고 추가하려는 클래스를 지정합니다.

지금 읽고 있는 이 페이지에서 첫 번째 단락 요소를 찾아 bg-red 클래스를 지정해 보겠습니다. .

var firstParagraph = document.querySelector("p")
firstParagraph.classList.add("bg-red")

결과:

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

.bg-red {
  background-color: #cf4b32;
}

classList add 메소드를 사용하여 색상에서 글꼴 크기에 이르기까지 CSS 속성을 사용하여 사용자 정의 클래스를 추가할 수 있습니다.

동시에 많은 클래스를 대상 요소에 쉽게 추가할 수 있습니다. 첫 번째 단락 요소에 3개의 클래스를 추가해 보겠습니다.

var firstParagraph = document.querySelector("p")

firstParagraph.classList.add("text-center", "text-xxl", "italic")

이렇게 하면 이 페이지의 첫 번째 단락이 가운데 정렬되고 큰 글꼴 크기가 지정되고 기울임꼴이 됩니다. 직접 사용해 보세요.