[JavaScript] Class 삽입 및 수정 / className과 classList 차이점

상황에 따라 css 변경하고 싶을 경우

css 파일에 작성을 해놓고 특정 class를 삽입하거나 삭제해 css를 적용하거나 적용하지 않을 수 있다.

클래스를 추가하고 삭제하는 방법은 classList, className 이 두가지를 이용해 가능하다.

 

☞ className의 경우 클래스명을 추가시에 < 기존에 가지고 있는 class명들을  전부 지우고 추가한다.>

☞ classList.add()의 경우  클래스명을 추가시에  <기존에 가지고 있는 class명들을 전부 유지하고 추가한다.>

 

• className

// html -> <h1 class="screen-header pink-background"></h1>
const h1 = document.querySelector("screen-header")


//h1의 className, 즉 screen-header pink-background가 출력된다.
console.log(h1.className)


// h1이 가진 모든 class를 삭제하고 main-header하나만을 추가
// html -> <h1 class="main-header"></h1>
h1.className = "main-header"


//h1이 가진 모든 class 삭제
h1.className = "";

 

 

 

 

• classList

      contains() : class가 존재하는지 확인

      add() : class name 추가

      remove() : class name 삭제

      toggle() : class name이 있는 경우엔 삭제하고 없는 경우엔 추가

 

// html -> <h1 class="screen-header pink-background"></h1>
const h1 = document.querySelector("screen-header")


// 해당 class가 존재하는지 확인
h1.classList.contains("pink-background");


// class명 추가
// html -> <h1 class="screen-header pink-background main-header"></h1>
h1.classList.add("main-header");


// class명 삭제
// html -> <h1 class="pink-background main-header"></h1>
h1.classList.remove("screen-header");


// 해당 class명이 존재하는 경우 삭제 or 존재하지않는 경우 삽입
// html -> <h1 class="pink-background main-header hello-header"></h1>
h1.classList.toggle("hello-header");