[책] 자바스크립트 코드 레시피 278 - 139일차

스타일 변경하기

• 자바스크립트 처리 결과에 따라 스타일을 변경하고 싶을 때

구문

요소.style.속성

설명

자바스크립트로 요소의 스타일 변경이 가능하며, 원하는 요소만을 지정하여 스타일에 변경을 주고 싶을 때 유용합니다. CSS 코드의 스타일을 지정할 때의 속성 표기법은 하이픈으로 단어를 연결하는 케밥케이스 방법이 아닌 카멜케이스를 사용한다는 것을 알아두면 됩니다.

실습

index.html

<div id="box">div-id-box</div>

---

script.js

const box = document.querySelector('#box');
box.style.backgroundColor = 'blue'; // 파란색으로 변경
box.style.color = 'white'; // 글씨 하얀색으로 변경