[JavaScript] CSS in Javascript

// style.css

body {
    background-color: beige;
}

h1 {
    color: cornflowerblue;
}

.active {
    color: tomato;
}

// app.js

CSS에 정의된 className으로 HTML element를 표시하고 숨기는 방법

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

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

h1.addEventListener("click", handleTitleClick);

// classList 사용 https://developer.mozilla.org/ko/docs/Web/API/DOMTokenList

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

function handleTitleClick() {
    const clickedClass = "active";
    //className은 원래 클래스명도 변경
    // classList 사용 , 원래 클래스명 유지
    if(h1.classList.contains(clickedClass)){ 
        // clickedClass를 포함하고 있으면 remove
        h1.classList.remove(clickedClass);
    } else {
        // clickedClass를 포함하고 있지 않으면 add
        h1.classList.add(clickedClass);
    }
}

h1.addEventListener("click", handleTitleClick);​

// toggle 사용 

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

function handleTitleClick() { // toggle 
    h1.classList.toggle("active");
}

h1.addEventListener("click", handleTitleClick);