JavaScript에서 요소에 적용된 CSS 속성의 실제 계산된 값을 확인해야 할 때가 있습니다. 이럴 때 사용하는 것이 바로 getComputedStyle() 메서드입니다. 이 메서드는 대상 요소에 적용된 모든 스타일 정보를 담고 있는 객체를 반환하며, 반환된 객체의 getPropertyValue() 메서드를 사용하면 원하는 CSS 속성의 현재 값을 손쉽게 읽어올 수 있습니다.
기본 사용법
getComputedStyle()은 다음과 같은 형태로 호출합니다.
let style = window.getComputedStyle(element);
let value = style.getPropertyValue('속성명');예제 1: background-color 값 가져오기
아래 예제는 div 요소의 배경색(background-color)을 JavaScript로 읽어와 화면에 출력하는 방법을 보여줍니다.
<!DOCTYPE html>
<html>
<head>
<style>
div {
margin: 4%;
padding: 4%;
width: 50%;
text-align: center;
background-color: powderblue;
border-radius: 4%;
}
</style>
</head>
<body>
<div>Test Div</div>
<span></span>
<script>
let element = document.querySelector('div');
let getStyle = window.getComputedStyle(element);
document.querySelector('span').textContent = ('background-color: ' + getStyle.getPropertyValue('background-color') + '.');
</script>
</body>
</html>출력 결과
위 코드를 실행하면 span 영역에 다음과 같이 계산된 배경색 값이 표시됩니다.
예제 2: box-shadow 값 가져오기
다음 예제는 내부 그림자(inset box-shadow)가 적용된 원형 div 요소의 box-shadow 속성 값을 읽어오는 예입니다.
<!DOCTYPE html>
<html>
<head>
<style>
div {
display: flex;
margin: 4%;
padding: 4%;
width: 20vh;
height: 20vh;
box-shadow: inset 0 0 23px cadetblue;
border: 2px groove green;
border-radius: 50%;
}
</style>
</head>
<body>
<div><div></div></div>
<span></span>
<script>
let element = document.querySelector('div');
let getStyle = window.getComputedStyle(element);
document.querySelector('span').textContent = ('box-shadow: ' + getStyle.getPropertyValue('box-shadow') + '.');
</script>
</body>
</html>출력 결과
실행하면 아래 이미지처럼 계산된 box-shadow 값이 화면에 나타납니다.
알아두면 좋은 점
getComputedStyle()로 반환되는 값은 스타일시트에 작성한 원본 단위가 아니라 브라우저가 계산한 최종 값이라는 점에 유의하세요. 예를 들어 백분율(%)로 지정한 크기는 픽셀(px) 단위로 변환되어 반환될 수 있습니다. 또한 인라인 스타일만 읽는 element.style과 달리, getComputedStyle()은 외부 스타일시트와 상속된 스타일까지 모두 반영한 값을 제공하므로 동적 스타일 분석에 매우 유용합니다.