바닐라 JS로 크롬앱 만들기 #3.7~#3.8

#3.7 CSS in Javascript part Two

CSS에 active라는 class를 생성. class의 color는 tomato.

Javascript에서 h1에 active class를 전달하기.

function handleTitleClick(){
    h1.className = "active";
}

CSS는 HTML을 보고 있고, Javascript는 HTML을 변경한다. 

 

#3.8 CSS in Javascript part Three

 

css를 Javascript에서 변경하는 것은 좋지 않다.

 

Javascript 코드

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

function handleTitleClick(){
    const clickedClass = "clicked";

   if (h1.className === clickedClass) {
       h1.className = "";
   } else {
       h1.className = clickedClass;
   }
}

h1.addEventListener("click", handleTitleClick);

CSS코드

 

.clicked {
    color: tomato;
}

eventListener에 클릭값으로 handleTitleClick을 실행

clicked 클래스를 clickedClass에 저장 (중복수정 방지)

h1에 className이 clicked가 저장된 clickedClass이면 className에 "" 값을 저장

h1에 className이 clicked가 저장된 clickedClass가 아니면 className에 clickedClass값을 저장(clicked)

 

#3.8 CSS in Javascript part Three

 

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

function handleTitleClick(){
    const clickedClass = "clicked";

   if (h1.className === clickedClass) {
       h1.className = "";
   } else {
       h1.className = clickedClass;
   }
}

h1.addEventListener("click", handleTitleClick);

class name을 clickedClass로 바꾸면 버그가 생기게 된다. 위 코드에는 문제가 있다. class name을 빈 값으로,

 

해결방법 

classList

이 function은 우리가 명시한 class가 HTML element의 class에 포함되어있는지 말해준다.

element의 class내용물을 조작하는 것을 허용한다. 

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

function handleTitleClick(){
    const clickedClass = "clicked";

   if (h1.classList.contains(clickedClass)) {
       h1.classList.remove(clickedClass);
   } else {
       h1.classList.add(clickedClass);
   }
}

h1.addEventListener("click", handleTitleClick);

▶toggle을 사용하는 방법

 

const h1 = document.querySelector("div.hello:first-child h1");
function handleTitleClick(){
    h1.classList.toggle("clicked");
}

h1.addEventListener("click", handleTitleClick);