[JavaScript] CSS in JavaScript 1

1. 클릭했을 때 색깔 바꾸기

function handleTitleClick() {
	console.log(h1.style.color);  <---- h1의 color를 획득
	h1.style.color = "blue";     <---- h1의 color를 설정
	console.log(h1.style.color);   <---- h1의 color를 다시 가지고옴
}

h1.addEventListener("click", handleTitleClick);

위의 코드는 한 번 클릭했을 때 파란색이 되는 코드이다.

만약 다시 한 번 더 클릭했을 때 주황색이 되고, 만약 또 다시 한 번 클릭했을 때 파란색이 되는 코드를 구현하려면 어떻게 해야 될까?

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

h1.addEventListener("click", handleTitleClick);

코드가 너무 복잡하니 h1.style.color의 코드를 간단하게 해본다.

function handleTitleClick() {
	const currentColor = h1.style.color;
    let newColor;
	if(currentColor === "blue"){
    	newColor = "tomato";
    } else {
    	newColor = "blue";
    }
    h1.style.color = newColor;
}

h1.addEventListener("click", handleTitleClick);

위 코드에서 let newColor를 지정해준 이유는 blue가 아니라면 tomato로 바꿔줘야 하기 때문이고, color가 게속 변하기 때문에 const가 아닌 let으로 지정해준다.
하지만 newColor를 변경해봤자 h1의 color엔 아무런 영향이 미치지 않아서 h1.style.color = newColor;를 입력해준다.