JS BASIC | CSS in Javascript (classList, toogle)

js에서 style(css) 변경하기

• html에서 h1을 불러온 후, 클릭할 때마다 색상이 red 혹은 blue로 바뀌도록 만들기
• .style을 통해 style요소를 수정한다
• .style.color .style.backgroundColor 등..

const $h1 = document.querySelector("h1");

fuction handler(){
  const currentColor = $h1.style.color;
  let newColor;
  if (currentColor === "blue"){
    newColor = "red";
  } else {
    newColor = "blue";
  }
  $h1.style.color = newColor;
}

h1.addEventListener ("click", handler);

css 파일을 활용하기 (className)

• css파일에서 style을, javascript에서 애니메이션을 담당하도록 나누기
• .className을 통해 class가 붙어있는지 확인한다

/* css */
h1 { color : red; }
.clicked { color : blue; }

//javascript
const $h1 = document.querySelector("h1");

fuction handler(){
  const clickedClass = "clicked";
  if (h1.className === clickedClass){ //파란색이면
    h1.className = ""; // 붙은 클래스 삭제
  } else {
    h1.className = clickedClass; //color:blue가 담긴 클래스 부여
  }
}
  
h1.addEventListener ("click", handler);

classList (contain, add, remove)

• className쓰게 되면 h1에 처음부터 붙어있던 클래스 네이밍이 초기화 되고 clickedClass로 대체된다

<h1 class="hi"></h1> //처음의 상태
<h1 class="clickedClass"></h1> //색상이 변한 후 상태, 클래스명 hi는 사라지게 됨

• 따라서 class를 여러개 추가했다 삭제할 수 있는 classList를 사용한다
• css 파일은 위와 동일하다

const $h1 = document.querySelector("h1");

fuction handler(){
  const clickedClass = "clicked";
  if (h1.classList.contains(clickedClass){//color:blue인 클래스를 가지고 있다면
    h1.classList.remove(clickedClass); // 붙은 클래스 삭제
  } else {
    h1.classList.add(clickedClass); //color:blue가 담긴 클래스 부여
  }
}
  
h1.addEventListener ("click", handler);

• 해당 코드에서 html은 이렇게 변하게 된다

<h1 class="hi"></h1> //처음의 상태
<h1 class="hi clickedClass"></h1> //색상이 변한 후 상태, 클래스명 hi 유지

toggle

• 위의 긴 코드를 아래의 짧은 코드로 대치할 수 있다
• toggle은 해당 코드에 괄호()의 클래스가 존재하면 삭제, 없다면 부여해주는 기능을 한다

const $h1 = document.querySelector("h1");

fuction handler(){
  h1.classList.toggle("clicked");
}
  
h1.addEventListener ("click", handler);