CSS in Javascript

(1)

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

function handleTitleClick(){
	if (h1.style.color==="blue"){
    h1.style.color='tomato;
    } else {
    	h1.style.color='blue';
    }
}

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

function handleTitleClick(){
  	const currentColor=h1.style.color; //변수추가 ( 기존 색
  	let newColor; //변수추가 (얘는 resize 될때 바뀔 색깔인 토마토색
	if (h1.style.color==="blue"){
    h1.style.color='tomato;
    } else {
    	h1.style.color='blue';
    }
  h1.style.color=newColor;
}

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

function handleTitleClick(){
  	const currentColor=h1.style.color; //변수추가 ( 기존 색
  	let newColor; //변수추가 (얘는 resize 될때 바뀔 색깔인 토마토색
	if (currentColor==="blue"){
    newColor='tomato;
    } else {
    	newColor='blue';
    }
  h1.style.color=newColor;
}

(2) javascript

(3) css

function handleTitleClick(){
	const clickedClass="clicked";
    if (h1.classList.contains(clickedClass)){ //클래스리스트가 clicked를 포함하고 있는지 확인
    h1.classNmae="";
    } else {
    	h1.className=clickedClass;
        }
     }

=>classList:classリストによる操作を許可

-constains-指定したクラスがhtml要素のクラスに含まれているかどうかを示します)

=>className:以前のクラスではなく、すべてのコンテンツを置き換えます。

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

h1.addEventListener("click", handleTitleClick);

toggle

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

h1.addEvnetListener("click", handleTitleClick);

クラスが存在する場合はclickedを削除する
存在しない場合は、「追加」をクリックします.