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

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

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

style 프로퍼티는 클래스를 다룰 수 없을 때만 사용하고, CSS 클래스 수정을 우선시한다.

style은 아래와 같이 자바스크립트를 사용해 요소의 좌표를 동적으로 계산하고, 좌표를 설정해 주고자 할 때 사용하면 좋다.

let top = /* 복잡한 계산식 */;
let left = /* 복잡한 계산식 */;

elem.style.left = left; // 예시: '123px', 런타임으로 좌표를 계산할 수 있습니다.
elem.style.top = top; // 예시: '456px'

텍스트의 색상을 넣거나 배경에 이미지를 추가하는 등의 작업은 CSS에 관련 스타일을 명시한 클래스를 만들고, 자바스크립트를 사용해 이 클래스를 요소에 추가해 주는 방식이 좋다.

className / classList

클래스 변경은 스크립트를 통해 자주 하는 동작 중 하나이다.

클래스를 위한 프로퍼티 className과 classList를 사용한다.

<body class="main page">
  <script>
    alert(document.body.className); // main page
  </script>
</body>

className에 무언가를 대입하면 클래스 문자열 전체가 바뀐다. 그런데 이렇게 속성값 전체를 바꾸는 게 아니라 클래스 하나만 추가하거나 제거하고 싶은 경우는 classList 프로퍼티를 사용한다.

<body class="main page">
  <script>
    // 클래스 추가
    document.body.classList.add('article');

    alert(document.body.className); // main page article
  </script>
</body>