바닐라 자바스크립트로 HTML 요소에 클래스 추가하는 방법

HTML 요소에 클래스를 추가하는 작업은 자바스크립트의 classList 속성이 제공하는 add() 메서드를 사용하면 아주 간단합니다. 먼저 일반적인 공식을 살펴본 뒤, 실전 예제를 통해 직접 확인해 보겠습니다.

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

위의 일반적인 예제에서는 지정한 선택자 이름(태그 선택자, 클래스 선택자 등 무엇이든 가능)으로 페이지에서 첫 번째 HTML 요소를 찾아 변수에 저장합니다.

그다음 해당 요소에 classList 속성의 add() 메서드를 연결하고, 추가하고 싶은 클래스 이름을 지정하면 됩니다.

지금 읽고 계신 이 페이지에서 첫 번째 문단(<p>) 요소를 찾아 bg-red 클래스를 부여해 보겠습니다.

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

실행 결과는 다음과 같습니다.

참고: 제 웹사이트의 CSS 스타일시트에 bg-red 클래스가 미리 정의되어 있기 때문에 정상적으로 적용됩니다. 해당 클래스는 다음과 같습니다.

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

classList의 add() 메서드를 활용하면 색상부터 글자 크기까지, 어떤 CSS 속성이든 담은 커스텀 클래스를 자유롭게 추가할 수 있습니다.

대상 요소에는 여러 개의 클래스를 동시에 쉽게 추가할 수도 있습니다. 첫 번째 문단 요소에 3개의 클래스를 한꺼번에 추가해 보겠습니다.

var firstParagraph = document.querySelector("p")

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

이 코드를 실행하면 페이지의 첫 번째 문단이 가운데 정렬되고, 큰 글자 크기가 적용되며, 기울임꼴로 표시됩니다. 직접 콘솔에서 실행해 보면서 결과를 확인해 보세요.