[JavaScript] CSS in JavaScript 3

1. classList

class들의 목록으로 작업할 수 있게 허용해준다.

className은 이전의 class들을 상관하지 않고 모든걸 교체해버린다.
그러나 classList는 조금 다르다.

classList에는 여러 가지 function들이 있다.
예를 들어, contains! 우리가 명시한 class가 HTML element의 class에 포함되어 있는지 말해준다.

function handleTitleClick() {
	const clickedClass = "clicked";
    if (h1.classList.contains(clickedClass)) {
    	h1.classList.remove(clickedClass);
    } else {
    	h1.classList.add(clickedClass);
    }
}

classList.contains는 HTML element가 가지고 있는 또 하나의 요소를 사용하는 것이다.

그러나 className이 바뀌기 때문에 remove으로 제거해준다.
만약에 clickedClass가 h1의 classList에 포함되어 있다면h1.classList.remove(clickedClass)을 작성해서 제거해준다.

만약에 clicked가 h1의 classList에 포함되어 있지 않다면, h1.classList.add(clickedClass);를 작성해서 추가해준다.

2. toggle

toggle function은 class name이 존재하는지 확인해서
class name이 존재한다면 toggle은 class name을 제거하고, class name이 존재하지 않는다면 toggle은 class name을 추가할 것이다.

한 마디로, toggle은

if (h1.classList.contains(clickedClass)) {
    	h1.classList.remove(clickedClass);
    } else {
    	h1.classList.add(clickedClass);
    }

위 코드를 아주 짧게 구현 하는 것이다.

h1.classList.toggel(clickedClass);