[JavaScript] 클래스를 제어하는 방법

웹의 특정 요소를 조작할 때, 가장 간편한 방법은 CSS로 해당 속성을 미리 지정한 후,

클래스를 추가 삭제하는 방식으로 제어하는 것입니다.

 

아래는 클래스를 제어와 관계있는 classList 속성과 className에 관한 예시입니다..

 

 

---

- Setting -

<!-- HTML -->
  <button class="bt1 bt2">BUTTON</button>

 

bt1과 bt2라는 2개의 클래스를 가진 버튼을 생성.

 

// JavaSciprt
  let $button = document.querySelector('button')

  $button.addEventListener('click', () => {
    // $button.classList.add("active", "add");
    // $button.classList.remove("bt2");
    // $button.classList.toggle("active");
    // $button.classList.replace("bt1", "bt3");
    // $button.className = "active";
   console.log($button)
   })

버튼을 클릭했을때 각각의 이벤트 동작을 console.log로 확인

 

 

---

classList.add

$button.addEventListener('click', () => {
  $button.classList.add("active", "add");
 console.log($button);
 })

  해당 요소에 작성한 클래스를 추가합니다.

 

 

출력 결과

<button class="bt1 bt2 active add">BUTTON</button>

 

 

---

classList.remove

$button.addEventListener('click', () => {
  $button.classList.remove("bt2");
 console.log($button);
 })

  해당 요소에서 작성한 클래스를 제거합니다.

 

 

출력 결과

<button class="bt1">BUTTON</button>

 

 

---

classList.toggle

$button.addEventListener('click', () => {
  $button.classList.toggle("active");
 console.log($button);
 })

  해당 요소에 작성한 클래스를 토글(추가와 제거)합니다 

  

 

출력 결과

<!-- 클릭하면 -->
  <button class="bt1 bt2 active">BUTTON</button>
  
<!-- 다시 클릭하면 -->
  <<button class="bt1 bt2">BUTTON</button>

 

 

---

classList.replace

$button.addEventListener('click', () => {
  $button.classList.replace("bt1", "bt3"); 
 console.log($button);
 })

  해당 요소의 첫 번째 클래스 값을 두 번째 값으로 변경.

 

 

출력 결과

<button class="bt3 bt2">BUTTON</button>

 

 

---

className

$button.addEventListener('click', () => {
  $button.className = "active";
 console.log($button);
 })

  해당 요소의 클래스를 입력한 값으로 변경.

 

 

출력 결과

 

<button class="active">BUTTON</button>