[JS] classList를 써서 methods를 활용, 특히 toggle

// "Normad Coder의 초보자를 위한 바닐라 JS" 들으며, 모멘텀 클론 코딩 중//

​

 

하나의 content에 여러 개의 기능들(예, 클릭 시 글자 색 변경, 컨텐츠 위에 마우스 커서 유지 등)을

따로 className을 부여하여 할당하면 어떤 것은 자동으로 뒤로(원래의 상태로) 돌아가지 않는다.

​

따라서

classList를 사용하여 객체에 포함된 함수인 methods를 활용한다.

add(), remove()가 자주 사용된다.

이때, 상태를 일일이 if (className === )로 부여하지 않아도 된다.

클래스를 답은 변수(hasClass)를 하나 만들고, 클릭해서 색이 변경되면 할당된 변수인 "CLICKED_CLASS"를 사라지게 하고, 사라지면 다시 추가되게 하는 함수 인 것이다.

 

const title = document.querySelector("#title");
const CLICKED_CLASS = "clicked";

// JS는 js기능만 하도록 바꾼 것임. 콘솔에서 확인해도 색이 아니라 clicked로 변경됨
//마우스 커서가 클릭 후 사라지는 것을 막기 위해서 classList 사용
function handleClick() {
  const hasClass = title.classList.contains(CLICKED_CLASS);
  if (hasClass) {
    title.classList.remove(CLICKED_CLASS);
  } else {
    title.classList.add(CLICKED_CLASS);
  } 
}
function init() {
  title.addEventListener("click", handleClick);
}
init();

 

그런데 toggle()은 놀랍도록 유용하다.

add, remove가 포함되기에 하나만 넣어주면, 알아서 기능한다.

 

const title = document.querySelector("#title");
const CLICKED_CLASS = "clicked";

function handleClick() {
  title.classList.toggle(CLICKED_CLASS);
}
function init() {
  title.addEventListener("click", handleClick);
}
init();

 

놀랍도록 게으른 개발자들 ㅎㅎ