3.8 CSS in JS (3)

강의

classList

이번 강의에서는 class name을 바꾸는 다른 방법인 classList를 사용해보자!

classList : class들의 목록으로 작업할 수 있게끔 허용해준다!

className은 클래스 이름이 여러개일수도 있는데, 클래스들을 하나로 생각하기 때문에 모든걸 교체해버려서 섬세한? 작업을 못함ㅇㅇ

classList에는 유용한 함수들이 있다.

+ remove, add

const h1 = document.querySelector(".hello h1");
function handleTitleClick(){
    const clickedClass = "clicked"
    if(h1.classList.contains(clickedClass)){
        h1.classList.remove(clickedClass);
    } else{
        h1.classList.add(clickedClass);
    }
}
h1.addEventListener("click",handleTitleClick);

"clicked"를 포함하지 않으면 추가해주고, 존재하면 제거해준다.

toggle

근데 다음으로 해줄건 이 코드들을 전부 지울거임
??왜...나름 열심히 짠거 아니야?라고 생각했는데....;-;

class name을 추가하고 제거하는 뭐 이런 작업들은 개발자들이 흔하게 하는 작업이다. 그렇기 때문에, 이 작업을 더 효율적으로 할 수 있는 함수들이 존재한다!! GOOD

toggle : class name을 확인하여 존재한다면 제거하고, 없으면 추가한다.

그리고 이 경우엔 string을 한번만 사용하기 때문에 더 간결한 코드를 위해서 const clickedClass = "clicked" 구문 삭제해준다.

그럼 언제 변수로 지정해주는가? string을 반복하는 순간 ㅇㅇ

완성된 코드

const h1 = document.querySelector(".hello h1");
function handleTitleClick(){
    h1.classList.toggle("clicked");
}
h1.addEventListener("click",handleTitleClick);

다음 강의는 이제 진짜 momentum앱을 만들 빌드를 쌓을거다!