November 30, 2021

자바스크립트를 사용해 어떻게 스타일과 클래스를 다룰 수 있는지 알아보기 전에, 중요한 규칙을 하나 집고 넘어가야 할 것 같습니다. 핵심만 요약했기 때문에 충분할진 모르겠지만 꼭 언급하고 넘어가야 하기 때문입니다.

요소에 스타일을 적용할 수 있는 방법은 두 가지가 있습니다.

1. CSS에 클래스를 만들고, 요소에 <div class="...">처럼 클래스 추가하기
2. <div style="...">처럼 프로퍼티를 style에 바로 써주기

자바스크립트를 사용하면 클래스와 style 프로퍼티 둘 다를 수정할 수 있습니다.

두 방법 중 하나를 택하라면 style 보다 CSS 클래스를 수정하는 것을 더 우선시해야 합니다. style은 클래스를 '다룰 수 없을 때’만 사용해야 합니다.

classList에 구현된 메서드는 다음과 같습니다.

• elem.classList.add/remove("class") – class를 추가하거나 제거
• elem.classList.toggle("class") – class가 존재할 경우 class를 제거하고, 그렇지 않은 경우엔 추가
• elem.classList.contains("class") – class 존재 여부에 따라 true/false를 반환

요소의 스타일

프로퍼티 elem.style은 속성 "style"에 쓰인 값에 대응되는 객체입니다. elem.style.width="100px"은 style 속성값을 문자열 width:100px로 설정한 것과 같죠.

여러 단어를 이어서 만든 프로퍼티는 다음와 같이 카멜 표기법을 사용해 이름 짓습니다.

background-color => elem.style.backgroundColor z-index => elem.style.zIndex border-left-width => elem.style.borderLeftWidth

style 프로퍼티 재지정하기

style 프로퍼티에 값을 할당했다가 시간이 지나 이를 제거해야 할 때가 종종 있습니다.