[책] 자바스크립트 코드 레시피 278 - 137일차

요소 클래스 속성 다루기

• 클래스를 추가하고 싶을 때
• 클래스를 제거하고 싶을 때
• 클래스의 존재 여부를 확인하고 싶을 때

구문

요소.classList.add('클래스') 클래스 추가
요소.classList.remove('클래스') 클래스 제거
요소.classList.contains('클래스') 존재 여부 확인

설명

이 메소드를 사용해 요소의 클래스 조작이 가능합니다. 자바스크립트로 요소의 클래스를 조작하여 동적인 변화를 줄 수 있으며, 조작 반응과 상태 변화 표시에 유용합니다. classList.add() 와 classList.remove() 는 클래스를 추가/제거하며, 여러 클래스를 한꺼번에 조작하는 것도 가능합니다.

실습

index.html

<div id="box1" class="red"></div>
<div id="box2" class="blue"></div>

---

script.js

const box1 = document.querySelector('#box1');
const box2 = document.querySelector('#box2');
console.log(box1.classList.contains('red')); // 결과: true
console.log(box2.classList.contains('red')); // 결과: false