JavaScript정리 5일차(classList)

Element.ClassList

• 역할 : CSS파일의 style의 설정들 중 class와 관련된 style을 적용 및 해제시키는 역할
• css (html과 js의 속성을 적용할 때는 ""로 string으로 인식시켜야 하지만 css는 바로 쓴다)
• 예제

<!-- CSS -->

h1{
	color: conrflowerblue;
    transition: color 0.5s ease-in-out;
}

/* JS */

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

function handleTitleClick(){
	const clickedClass = "clicked";
    
    if( h1.classList.contains(clickedClass) ){
    	h1.classList.remove(clickedClass);
    }else{
    	h1.classList.add(clickedClass);
    }
    
    //위 if문과 같이 2가지 경우만 존재할 경우
    //h1.classList.toggle("clicked");
    
}

h1.addEventListener("click", handleTitleClick);