바닐라JS 크롬 앱 만들기 CSS in JavaScript

---

목표

유저가 title을 클릭했을떄 title을 파란색으로 칠해주고 내가 한번더 클릭하면 색깔을 토마토색으로 바꾸고 싶다. 

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

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


h1.addEventListener("click", handleTitleClick);

여기서 하고 싶은건 console.log(h1.style.color);을 하여서 만약 h1.style.color가 blue라면 이걸 tomato로 변경해주세요! 

만약 h1.style.color 가 blue 색깔이 아니라면 blue로 변경해주세요 라고하는것! 

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

function handleTitleClick() {            //h1의 컬러 값이 blue와 일치하는지 확인!
    if(h1.style.color === "blue") {     // 여기서 ===는 값이 일치함을 확인하는것!
        h1.style.color = "tomato";   //여기서 하는 일은 이 h1의 color를 tomato로 바꿔주는것! 
    }else {
        h1.style.color = "blue";
    }
}


h1.addEventListener("click", handleTitleClick);

여기서 우리는 이 코드를 더 개선해서 더 깔끔하게 만들 수 있다!

이제 h1.style.color을 이렇게 많이 호출하기 보다는 먼저, 이  color 현재 상태를 저장하는것을 해보려고한다! 

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

function handleTitleClick() {            //h1의 컬러 값이 blue와 일치하는지 확인!
        const currentColor = h1.style.color;
    if(currentColor === "blue") {     // 여기서 ===는 값이 일치함을 확인하는것!
        currentColor = "tomato";   //여기서 하는 일은 이 h1의 color를 tomato로 바꿔주는것! 
    }else {
        currentColor = "blue";
    }
}


h1.addEventListener("click", handleTitleClick);

const로 h1.style.color( h1의 색상) 의 상태를 currentColor에 저장!

그리고 밑에 currentColor을 두번씩 적는것 대신에 let으로 변수를 하나 생성하려고한다!

여기서 const 와 let의 차이점을 기억해야한다! let은 값이 변경될 수 있다는거다!

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

function handleTitleClick() {            //h1의 컬러 값이 blue와 일치하는지 확인!
        const currentColor = h1.style.color;
        let newColor;
    if(currentColor === "blue") {     // 여기서 ===는 값이 일치함을 확인하는것!
        newColor = "tomato";   //여기서 하는 일은 이 h1의 color를 tomato로 바꿔주는것! 
    }else {
        newColor = "blue";
    }
    h1.style.color = newColor;
}


h1.addEventListener("click", handleTitleClick);

let으로 newColor라는 변수를 선언! newColor는 아무것도 없는 비어있는 let의 변수다!

이제 만약에 currentColor가 blue 라면 newColor는 tomato로 변경해줄것이다.

하지만 newColor를 변경해봤자 , 우리의 h1의 color에는 아무 영향 도 미치지 않기 떄문에 

그래서 우리는 h1.style.color(h1의 색상) 의 상태를 newColor 라고 정해줄것이다!

 

너가 만약에 element의 stlye을 Javascript에서 변경하는걸 별로 좋아하지 않으면? 

다른언어들과 섞이는것을 좋아하지 않으면?

CSS는 js파일에서도 할수 있지만 Css 파일에서 하는걸 더 선호하면 어떻게 JS와 CSS가 커뮤니케이션을 할것인지 다음 게시글에서 올리도록하겠습니다!