[Javascript] classList

classList

: 클래스를 조작하는 다양한 메서드들을 사용가능

.add()
.remove()
.contains()
.toggle()

 

 

classList.add()  클래스를 필요에 따라 삽입

const toggleBtn = document.querySelector(".navbar_toggleBtn");
const menu = document.querySelector(".navbar_menu");

toggleBtn.addEventListener("click", () => {
  menu.classList.add("active"); //menu에 active클래스추가
});

 

 

classList.remove()  클래스를 필요에 따라 삭제

const toggleBtn = document.querySelector(".navbar_toggleBtn");
const menu = document.querySelector(".navbar_menu");

toggleBtn.addEventListener("click", () => {
  menu.classList.remove("active"); //menu에 active클래스제거
});

 

 

classList.contains()  값이 존재하는지 체크(true/false)

const toggleBtn = document.querySelector(".navbar_toggleBtn");
const menu = document.querySelector(".navbar_menu");

toggleBtn.addEventListener("click", () => {
  if(menu.classList.contains("active")) { //menu에 active클래스가 있는지 체크
     alert("hello");//menu에 active클래스가 있으면 "hello"창 띄우기
  }
});

 

 

classList.toggle()   클래스값이 있는지 체크하고 없으면 더하고 있으면 제거

const toggleBtn = document.querySelector(".navbar_toggleBtn");
const menu = document.querySelector(".navbar_menu");
const icons = document.querySelector(".navbar_icons");

toggleBtn.addEventListener("click", () => {
  menu.classList.toggle("active");   //toggleBtn 클릭할 때마다 menu에 active클래스가 있으면 추가 없으면 제거
});

 

 

참고 :

https://velog.io/@rimu/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-classList.add-remove-contains-toggle

[자바스크립트] classList.add/ remove / contains / toggle

https://www.youtube.com/watch?v=X91jsJyZofw