[JavaScript] 자바스크립트에서 요소 클래스 속성 다루기

150_자바스크립트에서 요소 클래스 속성 다루기

[적용]

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

---

[문법]

메소드	의미	반환
요소.classList.add(클래스1, 클래스2, ...)	클래스 추가	없음
요소.classList.remove(클래스1, 클래스2, ...)	클래스 제거	없음
요소.classList.contains(클래스)	존재 여부 확인	진리값

---

[내용]

이 메소드를 사용해 요소의 클래스 조작이 가능하다.

자바스크립트로 요소의 클래스를 조작하여 동적인 변화를 줄 수 있으며, 조작 반응과 상태 변화 표시에 유용하다.

classList.add()와 classList.remove()는 클래스를 추가/제거하며, 여러 클래스를 한꺼번에 조작하는 것도 가능하다.

 

const box = document.querySelector('#box');

box.classList.add('blue');  // blue 클래스 추가
box.classList.remove('red');  // red 클래스 제거

// 한꺼번에 클래스 추가
box.classList.add('blue', 'yellow', 'pink');

// 한꺼번에 클래스 제거
box.classList.remove(;blue;, 'yellow');

---

[예시]

classList.contains()는 특정 클래스의 존재 여부를 확인한다.

 

HTML                                                                                                                                                              index.html

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

JavaScript                                                                                                                                                          main.js

const box1 = ducument.querySelector('#box1');
const box2 = document.querySelector('#box2');

console.log(box1.classList.contains('red'));  // 결과: true
console.log(box2.classList.contains('red;));  // 결과: false

 

 

---

 

 

 

 

 

참조 :
실무에 바로 적용하는 자바스크립트 코드레시피 278
아케다 야스노부, 카노 타케시 지음 / 이춘혁 옮김