Element.classList.add() 사용법

classList.add()는
DOM 요소에 주어진 클래스 속성 값을 추가합니다.

하나의 클래스 값만을 추가할 수도 있고, 여러 개의 클래스 값을 한 번에 추가할 수도 있습니다. 만약 해당 요소에 클래스 속성이 없으면 클래스 속성과 함께 값을 추가합니다. 추가하려는 클래스 값이 이미 존재한다면 아무 동작도 하지 않습니다.

DOM 요소에서 주어진 클래스 속성 값을 제거하려면 classList.remove()를 사용하세요.

일러두기
엄밀히 말하자면, class 속성의 값을 추가하는 것이 아니라 class 속성의 값인 '클래스 이름 목록에 클래스 이름을 추가한다'라고해야 합니다. class 속성은 해당 요소에 하나 이상의 클래스 이름을 지정하는 속성으로, class 속성에는 띄어쓰기로 여러 개의 클래스 이름을 가질 수 있는 클래스 이름 목록을 값으로 가집니다. classList.add()는 해당 요소의 클래스 속성의 값인 '클래스 이름 목록에 클래스 이름을 추가한다'라고 해야 하지만, 관행상 여기에서는 '클래스 값을 추가한다'라고 표기하겠습니다.

HTML class 속성

구문

JavaScript 
element.classList.add(className1)

// 여러 개의 클래스 값을 한 번에 추가할 수도 있습니다.
element.classList.add(className1, className2)
element.classList.add(className1, className2, /*...,*/ classNameN)

add() 함수는 classList 객체의 메서드입니다.

매개변수

classList.add()의 매개변수
className 필수. 요소에 추가하려는 클래스 값(문자열 형식)입니다.
쉼표(,)로 구분해서 여러 개의 클래스 값을 추가할 수 있습니다.

반환 값

없습니다. 즉, undefined를 반환합니다.

예제

하나의 클래스 값만을 추가하기

다음은 요소에 하나의 클래스 값만을 추가하는 예제입니다.

HTML 
<style>
    .bold {
        font-weight: 600;
    }
    .bg-red {
        background-color: red;
    }
</style>
<p class="bold">버튼을 클릭하면 "bg-red" 클래스 값이 추가됩니다.</p>
<button type="button">요소에 클래스 값 추가하기</button>
JavaScript 
const elem = document.querySelector("p");
const button = document.querySelector("button");

button.addEventListener("click", () => { // 버튼 클릭 이벤트
    // "bg-red" 클래스 값 추가하기
    elem.classList.add("bg-red");
});

코드 부연설명
querySelector() 함수는 지정한 CSS 선택자와 일치하는 첫 번째 요소 객체를 반환합니다.

"요소에 클래스 값 추가하기" 버튼을 클릭하면 <p> 요소에 "bg-red" 클래스 값이 추가됩니다. (해당 요소에 빨간 배경색이 추가됩니다.)

실제 적용된 모습 "요소에 클래스 값 추가하기" 버튼을 클릭해 보세요!

여러 개의 값을 한 번에 추가하기

다음의 예제는 요소에 여러 개의 클래스 값을 한 번에 추가하는 예제입니다.

HTML 
<style>
    .bold {
        font-weight: 600;
    }
    .bg-red {
        background-color: red;
    }
    .color-white {
        color: white;
    }
</style>
<p class="bold">버튼을 클릭하면 여러 개의 클래스 값이 추가됩니다.</p>
<button type="button">요소에 클래스 값 추가하기</button>

여러 개의 클래스 값을 추가하려면 쉼표(,)로 구분해서 추가하려는 클래스 값을 작성합니다. 작성하는 순서는 상관이 없습니다.

JavaScript 
const elem = document.querySelector("p");
const button = document.querySelector("button");

button.addEventListener("click", () => { // 버튼 클릭 이벤트
    // 띄어쓰기로 여러 개의 클래스 값 추가하기
    elem.classList.add("bg-red", "color-white");
});
실제 적용된 모습 "요소에 클래스 값 추가하기" 버튼을 클릭해 보세요!

여러 개의 값을 한 번에 추가하기 - 스프레드 문법(...)의 활용

스프레드 문법(...)의 활용해서 여러 개의 값을 한 번에 추가할 수 있습니다.

스프레드(...) 문법
JavaScript 
const classes = ["a", "b", "c"];
element.classList.add(...classes);

브라우저 호환성

classList.add()의 브라우저 호환성
메서드
데스크탑 Chrome
Chrome
데스크탑데스크탑 Edge
Edge
데스크탑 Firefox
Firefox
Safari
Safari
classList.add() 24 12 26 7

명세서

classList.add()의 명세서 사양
명세서 사양
classList.add() DOM Standard
#ref-for-dom-domtokenlist-add①

참고문헌

같이 보기