CSS in Javascript

step 1. element를 찾아라
step 2. event를 listen해라
step 3. 그 event에 반응해라
여기서 반응란 무언가를 보여주거나 감추거나 색을 바꾸는 등을 말한다.

<script>
  const h1 = document.querySelector(".hello h1");
function handleClick(){
  const currentColor = h1.style.color;
  // color의 현재 상태를 저장
  let  newColor;
  // let은 값이 변할 수 있어서 적합하다
  if(currentColor === "blue") {
    newColor = "tomato";
  } else {
    newColor = "blue";
  }
  h1.style.color = newColor;
};
h1.addEventListener("click", handleClick);
</script>

className

element에서 class name을 변경하는 메소드이다.
하지만 이렇게 코드를 짜면 h1태그에 이미 존재하는 class가 있다면 그 클래스를 잃게된다. className은 이전 class들은 상관하지 않고 모두 바꾼다.

<script>
const h1 = document.querySelector(".hello h1");
function handleClick(){
  const clickClass = "clicked";
  if(h1.className === clickClass){
    h1.className ="";
  } else {
    h1.className = clickClass
  }
}
h1.addEventListener("click", handleClick);
</script>

classList

• class들의 목록으로 작업할 수 있게끔 허용해준다.
• toggle function은 classname이 존재하는지 확인하여 있으면 제거하고 없으면 추가해준다.

  <script>
    const h1 = document.querySelector(".hello h1");
    function handleClick(){
      const clickClass = "clicked";
      if(h1.classList.contains(clickClass)){
        h1.classList.remove(clickClass);
      } else {
        h1.classList.add(clickClass);
      }
    }
h1.addEventListener("click", handleClick);
  </script>