javascript DAY3 220707 정리(CSS in javascript1)

code challenge alone!
if-else를 사용해 마우스로 브라우저의 텍스트를 클릭했을 때 파란색으로 바뀌고
한 번 더 클릭하면 토마토 색으로 바뀌는 코드를 작성해보자.

My Code

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

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

h1.addEventListener("click", handleTitleClick);

Result

Better Code

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

h1.addEventListener("click", handleTitleClick);

이렇게 코드를 짜는 편이 더 clean함

style이 자바스크립트에서 변경되는 것을 공부했다. 하지만 이 방법은 smart하지 못하다. 그 이유는 일을 할 때 그 일에 적합한 도구를 사용해야하기 때문이다.
style 작업에 적합한 도구는 CSS이고,
animation 작업에 적합한 도구는 JavasScript다.

앞선 해당 포스트의 글은 자바스크립트 안에서 CSS 작업을 한 경우다.