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

요소 클래스 유/무효화하기

• 요소의 클래스를 동적으로 다루고 싶을 때

구문

요소.classList.toggle(클래스) 클래스 전환

실습 1

classList.toggle() 은 설정된 클래스를 추가하거나 제거할 수 있습니다. 1초마다 클래스를 전환하는 샘플을 확인합니다.

setInterval(() => {
  box.classList.toggle('red');
}, 1000);

실습 2

버튼 클릭으로 표시 내용을 전환하는 샘플을 확인해 봅니다. .button 요소를 클릭하면 .content 요소의 on 클래스를 표시하거나 제거합니다. on 클래스가 설정된 상태에서만 .content 요소가 표시됩니다.

index.html

<div class="item">
  <button class="button">버튼 01</button>
  <div class="item-content">
    <div>HTML</div>
    <div>CSS</div>
    <div>JS</div>
  </div>
</div>
<div class="item">
  <button class="button">버튼 02</button>
  <div class="item-content">
    <div>시맨틱 마크업</div>
    <div>웹 표준</div>
    <div>웹 접근성</div>
  </div>
</div>

---

style.css

.item-content {
  display: none;
}
.item-content.on {
  display: block;
}

---

script.js

document.querySelectorAll('.button').forEach((button) => {
  button.addEventListener('click', () => {
    // 응용하면 클릭하는 요소가 on이 활성화한다면
    document.querySelectorAll('.button').forEach((button) => {
      button.nextElementSibling.classList.remove('on');
    });
    button.nextElementSibling.classList.toggle('on');
  });
});