CSS 파일에서 JavaScript로 속성 읽기

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

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

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

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

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

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

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

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

let computedStyle = getComputedStyle(elem);

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

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

이제 너비를 읽어봅시다:

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

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

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

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

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

버튼 클릭 시 요소의 너비와 높이를 출력하세요.

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

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

버튼 클릭 시 요소의 너비와 높이를 두 배로 늘리세요.