Coram Deo

# 3.8 CSS in Javascript part Three (class name 바꾸는 법) 본문

바닐라 JS

# 3.8 CSS in Javascript part Three (class name 바꾸는 법)

탁탁슝 2022. 8. 19. 19:47

class name 바꾸는 법 (Javascript에서 className으로 바꾸는 법 말고 다른 방법임.)

class List를 이용한다.

class List에는 다양한 function이 있는데, 그 중 하나가 contains 함수이다.

contains 함수 : 우리가 명시한 class가 HTML element의 class에 포함되어 있는지 말해줌.

* className은 이전 class를 기억하지않고 모든걸 교체해버림.

* class List : class들의 목록으로 작업할 수 있게끔 허용해줌. element의 class 내용물을 조작하는 것을 허용함.

class name을 추가하고 제거하고, element가 class name을 포함하고 있는지 확인함.

 

toggle을 이용한다.

toggle은 h1의 classList에 class name(예시.active)이 이미 있는지 확인해서 만약 있다면 제거해주고, 없다면 추가해줌.

toggle쓰면 if else구문 5줄을 없앨 수 있음. (즉 짧은 코드로 같은 기능을 구현할 수 있음.)