[DOM - 조작] 3️⃣ 클래스를 활용한 스타일 변경하기

classList

classList는 DOM 요소의 class 속성을 쉽게 다룰 수 있는 객체이다. 클래스 값의 추가, 제거, 확인 등을 다룰 수 있는 유용한 여러 메서드와 속성을 가지고 있다.

구문

element.classList;

classList의 주요 메서드

add()

classList.add()는 DOM 요소에 주어진 클래스 속성 값을 추가하는 메서드이다.

구문

element.classList.add(className1);

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

remove()

classList.remove()는 DOM 요소에서 주어진 클래스 속성 값을 제거한다.

구문

element.classList.remove(className1);

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

contains()

classList.contains()는 DOM 요소에 지정한 클래스 값이 있는지 체크햐주는 함수이다. 해당 요소에 지정한 클래스 값이 있으면 true를 반환하고, 없으면 false를 반환한다.

구문

element.classList.contains(className);

toggle()

classList.toggle()은 DOM 요소에 지정한 클래스 값이 없으면 추가하고, 있으면 제거한다. 해당 클래스 값을 추가할 경우에는 true를 반환하고, 제거할 경우에는 false를 반환한다.

구문

element.classList.toggle(className);

예제

const h2 = document.querySelector("h2");

h2.classList.add("purple");   // 클래스 추가
h2.classList.remove("purple"); // 클래스 제거
console.log(h2.classList.contains("purple")); // true 또는 false 반환
h2.classList.toggle("purple");  // 클래스가 있으면 제거, 없으면 추가