[JavaScript] HTML classList.toggle()로 클래스 추가/수정

className 을 통한 수정은 이전의 class 가 무엇있던지 관계없이 전부다 수정해버린다.

기존의 것을 두고 일부의 class를 추가하거나 수정하는 것에는 적합하지 않다.

그럴때 사용할 수 있는 것이 classList 이다

 

Element.classList.contains("")

Element.classList.remove("")

Element.classList.add("")

 

 

 

이러한 특정 class의 유무를 따져서 동작을 해주는 경우가 많다

if 문의 5줄의 코드를 요약해 줄 수 있는 기능의 함수가 classList에  있다

 

바로 toggle

Element.classList.toggle()

 

클래스명을 인자로 주면, 클래스가 있는지(if ~ contains) 판단해서 없으면 추가(add)해주고, 있으면 제거(remove)해준다.

 

동일한 문자열이 반복될 경우에만 변수를 선언해 할당해서 활용하는 것이 효과적이다.

  // const clickedClass = "clicked";
  // if (title.classList.contains(clickedClass)) {
  //   title.classList.remove(clickedClass);
  // } else {
  //   title.classList.add(clickedClass);
  // }

위의 코드가 아래의 한줄의 코드로 작성될 수 있어 굉장한 편의를 제공해 준다.

  title.classList.toggle("clicked");

 

 

 

 

 

 

 

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

 

Element.classList - Web API | MDN

https://nomadcoders.co/javascript-for-beginners/lectures/2898

All Courses – 노마드 코더 Nomad Coders