[Nomad Coders -JS로 크롬앱 만들기] CSS in JavaScript

CSS in JavaScript

 

자바스크립트에서 직접적으로 CSS 변경이 가능하다. 

style 이라는 method를 사용한다.

const h1 = document.querySelector(".hello h1");

function handleTitleClick(){
    const currnetColor = h1.style.color;
    let newColor;
    if(currnetColor === "blue"){
      newColor = "tomato";
    } else{
        newColor = "blue";
    }
    h1.style.color = newColor;
}

h1.addEventListener("click", handleTitleClick);

 

 

이렇게 h1 태그의 글자 색을 변경가능하다. 그러나 이것은 권장되는 방식은 아니다.

왜냐하면 JS가 CSS의 영역을 직접적으로 건드리는 것이기 때문이다. 

되도록이면 각각의 기능을 깔끔하게 분리시키는 게 이해하기도 쉽고 수정하기도 쉽다.

 

자바스크립트가 간접적으로 HTML을 변경하는 방식을 써보자.

 

function handleTitleClick(){
    if(h1.className === "active"){
        h1.className = "";
    } else{
        h1.className = "active";
    }
}

 

이렇게 className을 이용해 태그에 class를 추가할 수 있고,

 

h1{
    color: blue;
}

.active{
    color: tomato
}

CSS 파일에서 해당 class의 글자색을 변경하면 된다. 

 

 

참고로 값이 2번 이상 사용되면 무조건 변수로 지정하는 것이 좋다. 

raw value의 반복된 사용은 에러의 확률을 높인다. 

function handleTitleClick(){
    const clickedClass = "active";
    if(h1.className === clickedClass){
        h1.className = "";
    } else{
        h1.className = clickedClass;
    }
}

 

여기서 또 하나 예상되는 문제점이 h1의 class가 여러개일 경우이다.

className은 해당 태그의 class 전체를 교체하기 때문에

본래 있던 class들에 적용된 css가 다 사라지는 문제에 봉착하게 된다. 

 

 

그 때 사용 가능한 method가 ClassList이다.

classList을 통해 HTML element에 특정 class가 포함되어 있는지를 확인할 수 있고,

element의 class 내용물을 조작할 수도 있다.

 

DOMTokenList.contains(token) : token이 해당 token-list에 포함되어 있는지 확인.

DOMTokenList.add(token1[, token2[, ...tokenN]]) : token을 해당 token-list에 추가

DOMTokenList.remove(token1[, token2[, ...tokenN]]) : token을 해당 token-list에서 제거

 

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

 

이렇게 class를 조작하면 오류없는 코드를 짤 수 있다. 

 

 

마지막으로 이 여러 줄의 코드를 한 줄에 퉁칠 수 있는 치트키 toggle이 등장한다.

 

DOMTokenList.toggle(token [, force])

token이 존재하는지 확인한 후, 존재하면 제거하고 존재하지 않으면 추가한다. 

 

현재 예제로 대입해 보면 class name이 존재하면 class name을 제거,

class name이 존재하지 않으면 class name를 추가한다는 것이다.

 

function handleTitleClick(){
    h1.classList.toggle("active");
}

 

결국 한 줄의 코드로 마무리 완료!