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

스타일 확인하기

• 요소에 적용한 스타일을 확인하고 싶을 때

구문

getComputedStyle(요소).속성

설명

getComputedStyle() 을 사용해 스타일 정보를 가져올 수 있습니다. 각 스타일 설정에 따라 최종적으로 계산된 값을 가져옵니다.

실습

index.html

<div id="box" class="red">박스</div>

---

style.css

@charset "UTF-8";

#box {
  width: 100px;
  height: 100px;
}

.red {
  background-color: #ff3bc2;
}

---

script.js

const box = document.querySelector('#box');
console.log(getComputedStyle(box).width);
console.log(getComputedStyle(box).backgroundColor);