자바스크립트에서 스타일 읽기의 문제점

style 속성을 통해 읽을 수 있는 것은 style 속성을 통해 지정된 스타일뿐입니다. 이는 CSS 파일에 정의된 스타일은 읽을 수 없다는 의미입니다.

예제를 통해 살펴봅시다. 다음과 같은 요소가 있다고 가정해 봅시다:

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

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

css#elem {
  color: red;
}

변수에 요소에 대한 참조를 가져옵니다:

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

스타일 값을 읽어보려고 시도해 봅시다:

javascriptconsole.log(elem.style.color); // ''를 출력합니다