[JS] classList의 toggle

우선, classList란??

말그대로 html태그의 classList이다. 클래스 목록이라고 생각하면된다.
즉, html의 클래스로는 여러개의 클래스 명들이 들어올 수 있다.

 

우리는 다음과 같이 코드를 작성하여 글씨를 클릭할때 마다 색깔을 변하게 해주는 코드를 짰다

// JS 코드
const h1 = document.querySelector(".hello h1");

function handleTitleClick() {
  const clickedClass = "active";
  if (h1.classList.contains(clickedClass)) {
    h1.classList.remove(clickedClass);
  } else {
    h1.classList.add(clickedClass);

  }
}

h1.addEventListener("click", handleTitleClick);

// CSS 코드

body {
  background-color: beige;
}

h1 {
  color: red;
}

.active {
  color: skyblue;
}

.sexy-font {
  font-family: "Courier New", Courier, monospace;
}

다만 이렇게 하면 너무 코드가 길다.

위 코드를 한줄로 바꿔줄 수 있음

 

 

toggle을 사용하면 된다.

const h1 = document.querySelector(".hello h1");

function handleTitleClick() {
  h1.classList.toggle("active");
}

h1.addEventListener("click", handleTitleClick);

toggle은 h1의 classList에 active class가 이미 있는지 확인해서,

만약 있다면, toggle이 active를 제거해주고,

만약 없다면, toggle이 active를 추가해준다.

 

 

toggle이란
스마트폰에 달린 홈버튼이라 생각하기.
한번 누르면 스크린 켜주고 다시 누르면 스크린 꺼준다.