CSS 파일에서 JavaScript로 속성 읽기

CSS 파일에 정의된 속성은 특수 함수 getComputedStyles를 사용하여 읽을 수 있습니다.

어떻게 하는지 살펴봅시다. 다음 요소가 있다고 가정합니다:

html<div id="elem">
  text
</div>

이 요소에 대해 다음과 같은 스타일이 정의되어 있다고 가정합니다:

css#elem {
  width: 100px;
  color: red;
  font-size: 20px;
}

변수에 요소에 대한 참조를 얻습니다:

javascriptlet elem = document.querySelector('#elem');

이제 얻은 요소에 대한 참조를 함수 getComputedStyles의 매개변수로 전달합니다:

javascript let computedStyle = getComputedStyle(elem);

결과적으로 우리는 요소의 CSS 속성 값을 포함하는 객체를 얻습니다. 이를 사용하여, 예를 들어 색상을 읽어봅시다:

javascriptconsole.log(computedStyle.color); // 'red'를 출력합니다

이제 너비를 읽어봅시다:

javascriptconsole.log(computedStyle.width); // '100px'를 출력합니다

이제 글꼴 크기를 읽어봅시다:

javascriptconsole.log(computedStyle.fontSize); // '20px'를 출력합니다

css#elem {
  width: 200px;
  height: 200px;
}

css#elem {
  width: 200px;
  height: 200px;
}