[자바스크립트] classList.add/remove/contains / toggle

 

 

 

classList.add("추가하고 싶은 클래스명")

- 클래스를 추가 생성

 

 

classList.remove("제거하고 싶은 클래스명")

- 클래스를 제거

 

 

classList.contains("확인하고 싶은 클래스명")

- true/false로 클래스의 존재여부를 확인해줌/값이 존재하는지 체크

 

ⓐ CLICKED_CLASS 라는 변수 안에 있는 클래스의 존재 여부를 확인하여 존재하면 true / 없으면 false

ⓑ if문 조건은 기본이 true이므로 !hasClass의 뜻은 false이다

ⓒ if문의 조건이 false라면 CLICKED_CLASS를 추가하고 else에서는 제거하라는 뜻. 

function handleClick() {
  const hasClass = title.classList.contains(CLICKED_CLASS);

  if (!hasClass) {
    title.classList.add(CLICKED_CLASS);
  } else {
    title.classList.remove(CLICKED_CLASS);
  }
}

 

 

classList.toggle("확인하고 싶은 클래스명")

- 클래스값이 있는지 체크하고 없으면 추가하고 있으면 제거

- 클래스 존재 여부만 확인하는 것이 아니고 추가/제거를 한방에!

navBar.classList.toggle("nav"); <- 이런형식으로 작성해야 클래스가 추가됨

 

const a = document.querySelector(".a");


const CALSS = "b";

function clickThis(){
    a.innerHTML = "글자색이 변경되었습니다.";
    a.classList.toggle(CALSS);
}

a.addEventListener("click", clickThis);