9. [Javascript] JS로 Class 속성 추가, 제거하기 (with classList)

요소의 클래스를 추가하거나 제거하기 위해 classList 속성을 사용할 수 있습니다.
classList는 클래스를 조작하는 여러 메서드를 제공합니다.

---

1. 클래스 추가하기

• classList.add() 메서드를 사용하여 요소에 클래스를 추가할 수 있습니다.

// 요소 선택
var element = document.getElementById('myElement');

// 클래스 추가
element.classList.add('myClass');

위의 코드에서 add() 메서드를 사용하여 myElement 요소에 myClass 클래스를 추가합니다.

---

 

2. 클래스 제거하기

• classList.remove() 메서드를 사용하여 요소에서 클래스를 제거할 수 있습니다.

// 요소 선택
var element = document.getElementById('myElement');

// 클래스 제거
element.classList.remove('myClass');

위의 코드에서 remove() 메서드를 사용하여 myElement 요소에서 myClass 클래스를 제거합니다.

---

 

3. 클래스 토글하기

• classList.toggle() 메서드를 사용하여 요소에 클래스를 토글(추가 또는 제거)할 수 있습니다. 
• 해당 클래스가 존재하는 경우에는 제거되고, 존재하지 않는 경우에는 추가됩니다.

// 요소 선택
var element = document.getElementById('myElement');

// 클래스 토글
element.classList.toggle('myClass');

위의 코드에서 toggle() 메서드를 사용하여 myElement 요소의 myClass 클래스를 토글합니다.

---

Javascript의 classList 사용하여 CSS의 Class 추가, 삭제를 통해 스타일의 변화를 줄 수 있습니다.