[javascript]className & classList & toggle

자바스크립트에서는 html의 class명을 입력 / 수정할 수 있다.

h1태그의 문자를 클릭할 때마다 h1태그의 class명을 바꾸는 코드를
3가지 방법으로 사용가능하기에 하기와 같이 소개한다.

1. className으로 바꾸기

클래스명이 단일값일 경우 사용가능하다.

const h1 = document.querySelector("div.hello:first-child h1");

function handleTitleClick(){
    const clickedClass = "clicked"
    if(h1.className===clickedClass){
        h1.className="";
    }
    else{
        h1.className=clickedClass);
    }
    h1.classList.toggle("clicked");
}

h1.addEventListener("click", handleTitleClick); 

2. classList로 기존클래스명에 추가하기(권장)

통상 복수의 클래스명을 가져가는 경우가 많으므로 className보다는 classList의 add와 remove기능을 통해 보다 유연하게 사용이 가능하다.

const h1 = document.querySelector("div.hello:first-child h1");

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

h1.addEventListener("click",handleTitleClick);

3. classList에서 toggle활용하기(권장)

classList.contains/add/remove대신에, 없으면 넣고 있으면 빼주는 간편토글활용시 코드가 훨씬 짧아진다.

const h1 = document.querySelector("div.hello:first-child h1");

function handleTitleClicked(){
	const clickedClass = "clicked";
    h1.classList.toggle(clickedClass);
}

h1.addEventListner("click", handleTltleClick);