[JS]バニラJavaScript-切り替え

/*3.6 CSS in Javascript*/
const h1 = document.querySelector(".hello h1");

function handleTitleClick(){
    const currentColor = h1.style.color;
    let newColor;
    if(currentColor ==="blue") {
        newColor = "tomato";
    } else {
        newColor = "blue";
    }
    h1.style.color = newColor; //맘에 안드는 코드 css 코드이기 때문
}

h1.addEventListener("click", handleTitleClick);

/*3.6 CSS in Javascript*/

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


function handleTitleClick(){
    const clickedClass = "clicked"; //string을 변수에 저장하면 오류가 떠도 에러를 잡아준다.
    if (h1.className === clickedClass) {
      h1.className = "";
    } else {
      h1.className = clickedClass;
    } 
}


// title에 click 이벤트가 발생하면 handleTitleClick 함수가 동작되길 원해!
h1.addEventListener("click", handleTitleClick);

h1.addEventListener("click", handleTitleClick);

body {
    background-color: rgb(255, 233, 199);
}

h1 {
    color : cornflowerblue;
    transition: color .5s ease-in-out;
}

.clicked {
    color: tomato;
}

containsは、指定したclassがHTML要素のclassに含まれているかどうかを示します.

タグが存在する場合、スイッチ関数はタグを削除します
トークンがない場合は、トークンを追加します.
LIKEスマートフォンの右ボタンと同じです.(画面開閉機能)
ex)toggle h 1のclassListでclickedが既に存在することを確認し、
あればtoggle clickedを外します
class nameが存在しない場合、toggleはclass nameを追加します.

const clickedClass = "clicked";
if(h1.classList.contains(clickedClass)){
    h1.classList.remove(clickedClass);
} else {
    h1.classList.add(clickedClass);
}