[Javascript 기초] Toggle

이전 포스트에서 Javascript 에서 style 을 변경하는 것보다 style 은 CSS 영역에서 변경하는 것을 언급했다.

 

Style	CSS 를 통해 HTML Style 주기
Animation	Javascript 를 통해 HTML에 동적효과

 

이렇게 설명하면 대체 어떻게 CSS 에서 이벤트를 통한 스타일 변환을 한다는 소리지? 라는 생각이 들 수 있다.

 

전하고자하는 말은 CSS 에서 내가 원하는 Style 을 구현하고 Javascript를 통하여 HTML의 element에 class 를 부여하거나 (element.className = "name"), 삭제하는 방식으로 스타일을 부여하는 방식을 의미한다.

 

---

 element.classList.

 

 앞서서 element.className = " " 을 설명하였지만, 실제로는 element.classList 를 통한 작업이 더 좋은 방법이다.

 

element.className 은 이전 class 에 상관없이 class의 name 정보 전체를 바꿔버린다.

 

만약 어떤 element에 class 를 수정하고 싶지만 이전 class를 포함하거나 제외하고 싶은 경우에는 적합하지 않다.

 

그런 경우에는 element.classList.add / remove 를 통하여 class 를 추가, 제거 할 수 있다.

 

class 또한 List를 만들어서 관리하는 것이 className 의 단점을 보완한 더 효율적인 방법이다

 

element.classList.contains("클래스이름")	element 의 class에 해당 class가 있는가	boolean
element.classList.add("클래스이름")	element 의 class에 해당 class 추가
element.class.List.remove("클래스이름")	element 의 class에 해당 class 제거

 

const h1 = document.querySelector("div.hello:first-child h1"); // 제목을 클릭하면 title element의 class 변환 function handleTitleClick() {     const clickedClass = "clicked"     if (h1.classList.contains(clickedClass)) {         h1.classList.remove(clickedClass);     } else{         h1.classList.add(clicked);     } } h1.addEventListener("click",handleTitleClick);

---

element.classList.toggle("classname")

 

 바로 위에서 코드 작성한 바에서 더 적은 코드로 효율적이게 작동할 수 있도록 하는 기능이 togle 이다.

 

const h1 = document.querySelector("div.hello:first-child h1"); // 제목을 클릭하면 title element의 class 변환 function handleTitleClick() {     h1.classList.toggle("clicked");     const clickedClass = "clicked"     if (h1.classList.contains(clickedClass)) {         h1.classList.remove(clickedClass);     } else{         h1.classList.add(clicked);     } } h1.addEventListener("click",handleTitleClick);

 

h1.classList.toggle("clicked") 의 의미는 h1 에 classList 에 "clicked" class가  존재하면 remove 하고 없으면 add 하는 기능이다.