바닐라JS 챌린지 day 5

sohyun·2022년 11월 29일
0
post-thumbnail

3.6~3.8 CSS in JS

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

function handleTitleClick(){
title.style.color = "blue";
}
title.addEventListener("click",handleTitleClick);
//click하면 handleTitleClick이라는 function이 동작하길 원함
//그래서 handle~ 함수에 () 를 안넣은 것임
//즉, js가 대신 실행시켜주길 바라는 것임!
  • 하지만 CSS 파일을 따로 만들어서 사용하는 경우가 대부분임

조건에따른 CSS

const h1 = document.querySelector("div.hello");

function handleTitleClick(){
    const currentColor = h1.style.color;
    let newColor;
    if(currentColor === "blue"){
        newColor = "tomato";
    } else {
        newColor = "blue";
    }
    h1.style.color = newColor;
}

h1.addEventListener("click", handleTitleClick);

1) click event 발생 및 함수 실행
2) currentColor 변수 선언 후 h1.style.color 값 복사 (getter)
3) newColor 변수 선언
4) currentColor 현재 값 확인
5) 조건에 따라 newColor에 "tomato" or "blue" 값 대입
6) 마지막으로 h1.style.color에 newColor값 대입 (setter)

classList, className

  • classList 우리가 class들의 목록으로 작업할수 있게끔 허용해준다.

  • className이전calss를 상관하지않고 모든걸 교체해 버린다.

  • classList를 이용하는건
    js에서 건드리는건 HTML element가 가지고있는 또하나의 요소 사용하는 것이다.
    = element의 class내용물을 조작하는 것을 허용한다는 뜻

const h1 = document.querySelector('.hello h1');

function handleTitleClick() {
  const clickedClass = 'clicked';
  if (h1.classList.contains(clickedClass)) {
    h1.classList.remove(clickedClass); 
  } else {
    h1.classList.add(clickedClass);
  }
}
h1.addEventListener('click', handleTitleClick);

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

toggle

  • toggle()은 토큰이 존재하면 토큰제거 토큰존재 하지않으면 토큰 추가
const h1 = document.querySelector('.hello h1');

function handleTitleClick() {
   h1.classList.toggle("clicked");
  }
h1.addEventListener('click', handleTitleClick);

ex)
toggle은 h1의 classList에 clicked class가 이미있는지 확인하여
만약있다면 toggle 이 clicked를 제거해준다
만약 class name이 존재하지 않는다면 toggle은 classname 추가

profile
냠소현 개발일지

0개의 댓글