[JavaScript] classList

HTML 요소에 CSS 클래스를 추가, 제거, 확인할 때 자주 쓰는 것이 classList

 

자주 사용하는 메소드

• classList.contains('클래스명') : 특정 클래스가 있는지 확인 (true / false 반환)
• classList.add('클래스명') : 클래스 추가
• classList.remove('클래스명') : 클래스 제거
• classList.toggle('클래스명') : 클래스가 있으면 제거, 없으면 추가

 

toggle로 간단하게

<div class="box" id="box"></div>
<button id="btn">토글</button>

<script>
  const box = document.getElementById('box');
  const btn = document.getElementById('btn');

  btn.addEventListener('click', () => {
    box.classList.toggle('active'); // 한 줄로 끝!
  });
</script>

 

 

contains + add/remove로 toggle 구현

<div class="box" id="box"></div>
<button id="btn">토글</button>

<script>
  const box = document.getElementById('box');
  const btn = document.getElementById('btn');

  btn.addEventListener('click', () => {
    if (box.classList.contains('active')) {
      box.classList.remove('active'); // 있으면 제거
    } else {
      box.classList.add('active');    // 없으면 추가
    }
  });
</script>

 

 

toggle을 사용하면 편하지만 contains + add/remove로도 구현이 가능하다.