JS - [element에 클래스 추가 제거 - classList / toggle]

0. CSS in JS

브라우저에서 글자를 클릭하면 색이 파란색과 토마토색 사이에서 계속 바뀌게 만들어보자.

아래와 같이 현재 스타일 색상이 blue이면 tomato 색으로, 아니라면 blue로 변경하는 코드를 작성했다.

클릭하면 파란색

다시 클릭하면 토마토색

또 클릭하면 파란색!

but 위와 같은 코드에서는 뭘 하는지 한눈에 알아보기 어렵고 h1.style.color 코드를 반복해서 사용하고 있어서 좋지 않다. 따라서 아래와 같이 현재 색상을 나타내는 h1.style.color 코드를 currentColor 변수로 생성하고, 바꾸려는 색상을 newColor 변수로 이름을 지어주면 이 코드로 뭘 하려는지 더 쉽게 이해할 수 있다!!

 

이제 같은 내용을 JS에 직접적으로 스타일을 입히지 않고, css파일에 스타일을 꾸민 후 JS에 해당 내용을 입히는 방법으로 해 보겠다.

 

css에 아래와 같은 코드를,

JS에 아래와 같은 코드를 작성해보겠다.

 

그러면 JS는 HTML을 변경할 것이고, CSS는 HTML에 연결되어 있으므로  ->  h1 변수로 지정한 요소에 click 이벤트가 발생할 경우 handleTitleClick 함수가 실행되어, h1 요소에 active 클래스가 추가될 것이다. 그러면 HTML에 연결된 CSS에 active 클래스의 색을 tomato로 변경하라는 코드가 있으므로 색상이 변경된다.

여기서 클릭하면

토마토 색으로 변경됨

 

우리가 했던 내용은 클릭하면 토마토색으로, 다시 클릭하면 파우더블루 색상으로 변경되는 것이었다. 그러니 아래와 같이 if문을 추가해주자.

 

 

 

자 여기서 보면 active라는 이름은 내가 지어낸 클래스 이름이다. 그러니 이름이 여러번 중복되서 나올거나, 오타를 내거나 잘못된 이름을 입력할 가능성이 있다.

 그러니 (class이름을 active -> clicked로 변경했음!) const clickedClass = "clicked"; 코드를 추가해주면 error가 발생할 수 있는 부분을 줄일 수 있다.

const clickedClass = "clicked"; 코드를 추가

 

 

그런데 여기엔 버그가 하나있다. 만약 h1 요소에 class가 있는 상태였다면, JS의 코드로 인해 원래 있던 className이 active로 교체될 것이다.

 

 

---

1. classList

그러니 이 방법 대신 class name을 바꾸는 다른 방법으로 classList를 이용하는 방법이 있다. classList는 말 그대로 class들의 목록으로 작업할 수 있게끔 해준다. contains 라는 function을 이용하면 우리가 명시한 class가 HTML element의 class에 포함되어 있는지 알 수 있다. 그러니 아래와 같이 조건을 변경할 수 있다.

 

여기서 우리가 한 건 classList가 clicked를 포함하고 있는지만을 확인하는 것이다. class name이 변경되는 문제는 여전하다! 이 때 remove 또는 add function을 사용하면 된다.

위와 같이 코드를 작성하면 clickedClass가 h1의 classList에 포함되어있다면 clicked 클래스를 제거하고, 포함되어있지 않다면 추가할 것이다.

 

 

---

3. toggle

지금까지 한 작업은 JS를 사용하면서 아주 많이 사용하는 작업이고, 이런 이유 덕분에 더 쉽게 해줄 function들이 존재한다. 그 function중에 하나가 toggle function 이다. toggle function은 class name이 존재하는지 확인을 하고 존재하지 않는다면 class name을 추가할 것이다.

그러니 앞서 작성했던 코드를 아래와 같이 간결하게 사용할 수 있다.

 

정리해보면! toggle은 h1의 classList에 clicked class가 이미 있는지 확인해서 만약 있다면 클래스를 제거하고 없다면 추가해줄 것이다.

 

이렇게 CSS에 정의된 class name을 들고 HTML element에서 숨기고 표시하는 방법을 배웠다!

---