#3.8 CSS in Javascript part Three

• classList로 클래스 이름을 바꾸는 것이 아닌 classname 목록들 관리하기

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

function mouseClick(){
    const clickedClass = "clicked";
    if(h1.classList.contains(clickedClass)){ //classList가 clickedClass를 포함하고 있다면
        h1.classList.remove(clickedClass); //classList에 clickedClass를 제거
    }else{ //포함하고 있지 않다면
        h1.classList.add(clickedClass);//classList에 clickedClass를 추가
    }
}

h1.addEventListener("click",mouseClick);

• foggle funcion ->위 코드랑 완전 동일한 기능, h1의 classList에 clicked가 있는지 확인을 한 후 있으면 제거 없으면 추가

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

function mouseClick(){
    h1.classList.toggle("clicked"); //clicked한 번만 나오기 때문에 const로 변수 만들필요x
}

h1.addEventListener("click",mouseClick);