toggle

index.js

const title = document.querySelector("#title");
 
const CLICKED_CLASS = "clicked";
 
function handleClick() {
 title.classList.toggle(CLICKED_CLASS);
}
 
function init(){
    title.addEventListener("click", handleClick);
}
init();

 

 

 

 

 

 

<h1 id="title" class="btn">Work Work Work Work!</h1>

id는 title로 주고 class는 btn으로 준 예시입니다.

 

 

 

 

 

const title = document.querySelector("#title");
 
const CLICKED_CLASS = "clicked";
 
function handleClick() {
 title.classList.toggle(CLICKED_CLASS);
}
 
function init(){
    title.addEventListener("click", handleClick);
}
init();

index.js 내용을 보면, 10번 라인의 click 이벤트리스너에 의해서 클릭할때 마다

 

6번 라인의 id인 title의 classList.toggle에 의해서 class명이 "btn" <-> "btn clicked"

 

변환됩니다. 

 

toggle의 기능이 해당요소가 있으면 add 시키고, 없으면 remove 시키는 기능이기 때문입니다. 

  

 

 

 

 

도움 : Nomad Coder