[JavaScript] 8식 - classList, toggle

* classList

• 단순히 classname으로 바꾸면 단일 동작 밖에 못하기때문에 classlist를 사용

const title = document.querySelector("#title");

const CLICKED_CLASS = "clicked";

function handleclick() {
    const hasclass = title.classList.contains(CLICKED_CLASS); // contains value 값이 존재하는지 확인함.
    if (hasclass) {                                           // contains 안의 CLCKED_CLASS (clicked) 가 title 클래스에 있는지 확인하고
        title.classList.remove(CLICKED_CLASS);                // 있으면 제거하고
    } else {
        title.classList.add(CLICKED_CLASS);                   // 없으면 더한다.
    }
}

function init() {
    title.addEventListener("click", handleclick);
}
init();

---

* toggle

• 기본 classlist는 너무 길기때문에 toggle로 처리 가능하다.

const title = document.querySelector("#title");

const CLICKED_CLASS = "clicked";

function handleclick() {
    title.classList.toggle(CLICKED_CLASS); // 위에 긴 문장들을 toggle하나로 처리
}

function init() {
    title.addEventListener("click", handleclick);
}
init();