바닐라 JS 크롬앱만들기 CSS in Javascript #3

---

목표

class name을 바꾸는 다른방법과 그 방법은 classList를 사용하는인데 한번 익숙해보져봅시다! 

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);

classList는 말 그대로 , 우리가 class들의 목록을 작업할 수 있게끔 허용해준다!

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

className은 이전에 class들은 상관하지 않고 그냥 모든걸 교체해버린다

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

function handleTitleClick() {       
    const clickedClass = "clicked" 
    if(h1.classList.contains(clickedClass)) {
        h1.className = "";
    }else {
        h1.className = "clickedClass";
    }
}
  

h1.addEventListener("click", handleTitleClick);

만약에 이 clickedClass가 h1의 classList에 포함되어 있다면, 

우리는 h1.classList.remove(clickedClass);

만약에 clickedClass가 h1의 classList에 포함되어 있지 않다면 

h1.classList.add(clickedClass);

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);

우리는 자바스크립트를 사용하여 자바스크립트가 특정한 class name만 변경하도록 했다

element가 class name을 포함하고 있는지 확인하고 있는 것등은 정말 개발자 사이에서는 흔한일이다 

 

toggle 이라는 function 은 굉장히 흥미로운 기능인데!

이 function은 class name이 존재하는지 확인할것이다. 

만약 class name이 존재한다면 toggle은 class name을 제거할거야!

만약 class name이 존재하지 않는다면 toggle은 class name을 추가할것이다.

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

function handleTitleClick() {       
   
  h1.classList.toggle("clicked");    //지금 이 string을 반복하고 싶은 순간 그떄가 constant를 생성하는 순간
}
  
h1.addEventListener("click", handleTitleClick);

toggle이 정확히 무엇을 하는것인가? toggle은 h1의 classList에 cliked class가 이미 있는지 확인해서 

만약 있다면 toggle이 clicked를 제거해준다!

만약 h1의 classList에 clicked가 존재하지 않는다면 ,toggle은 clicekd를 calssList에 추가를 해준다!

Just like 1) 만약 내가 버튼이 하나 있는데 그걸 누르면 불빛이 나오고 다시 한번 누르면 꺼지는것처럼

2) 나의 스마트폰에 달린 한번 누르면 스크린을 잠그고 다시 한번 누르면 스크린을 켜주는 버튼 같은것! 

 

---

이제 우리는Css에 정의된 class name들로 HTML element에서 숨기고 표시하는 방법과 toggle을 사용하는 방법을 이해했다! 

우리는 이제 Application을 만들기 시작할것이다!! I can't wait!!!!