2 - classList를 이용한 토글 만들기

여담)

계속 document.querySelector가 vscode에서 안먹어서 뭐지 했는데

html에서 script를 body 닫는태그 바로 직전에 놔서 h1먼저 읽고 script가 맨 나중에 실행되게 하니깐 됨 - 대부분 이 위치에 놓는듯

https://okky.kr/articles/655641 

OKKY - document.querySelector가 안 되는 경우 ..

 

className처럼 classList라는게 존재해서 저번처럼 완전히 replace시켜버리지 않고 한개씩 class를 제거하고 추가하는게 가능

https://developer.mozilla.org/ko/docs/Web/API/Element/classList

Element.classList - Web API | MDN

 

classList.contains( ) - 포함되어 있는지 아닌지 알려줌

classList.remove( ) - 제거해줌

classList.add( ) - 추가해줌  *셋다 기존의 class는 안건들음

function handleTitle() {

 

if(title.classList.contains('active')) {

title.classList.remove('active');

}

else {title.classList.add('active');}

}

 

이런식으로 간단하게 표현이 가능

 

여기서 더 간단하게 하는법은 toggle을 사용하면 됨 - 포함되어 있으면 remove , 없으면 add해줌 (두번째 코드는 아직 잘 모르겠음;;)

// if visible is set remove it, otherwise add it
div.classList.toggle("visible");

// add/remove visible, depending on test conditional, i less than 10
div.classList.toggle("visible", i < 10 );

title.classList.toggle('active')  - 여기에 if문이 포함되어 있는 method이기 때문에 그냥 이 한줄만 쓰면 코딩 끝

 

 

+ 살짝 만들어본 버튼 이용한 나이트모드

const button = document.querySelector("button");

 

function nightMode() {document.body.classList.toggle('night')};

 

function eventClick(element,func) {element.addEventListener("click",func)};

eventClick(title,handleTitle);

eventClick(button,nightMode);

 

button을 "click"하면 nightMode함수가 실행 - 꼭 그 element만 바꾸는거라고 생각하지 말기 함수에 따라 바뀌는 곳은 얼마든지 설정가능