className, classList, toggle

className 으로 html 문서의 어떤 class 명을 변경하는 것은 바람직하지 않다. 기존의 클래스명이 사라질 수 있기 때문이다.

 

classList : class 들의 목록으로 작업할 수 있게끔 허용해준다.

className : 이전에 class 들을 상관없이 모든걸 교체해버린다.

 

 

 

 

 

 

해결방법: classList

 

function handleTitleClick() {
    const clickedClass = 'clicked';
    if (hello.classList.contains(clickedClass))
        hello.classList.remove(clickedClass);

    else {
        hello.classList.add(clickedClass);
    }
}

 

기존의 클래스명을 간직한다.

 

 

 

 

해결방법: toggle

 

function handleTitleClick() {
    hello.classList.toggle('clicked');
}

 

toggle 이라는 메서드로 더 간단하게 한줄의 코드로 구현할 수 있다.