getComputedStyle 함수

getComputedStyle 함수는 요소의 어떤 CSS 속성 값이라도 얻을 수 있게 해줍니다, 심지어 CSS 파일로부터도.

구문

let 객체 = getComputedStyle(요소);

상세 설명

작동 방식은 다음과 같습니다(주의: 우리가 기대하는 것과는 다릅니다): 함수는 매개변수로 요소를 받고, 전달된 요소의 모든 CSS 속성을 포함하는 객체를 반환합니다. 이 객체를 style 변수에 넣어봅시다. 이름은 임의로 정할 수 있습니다, 이건 단지 변수일 뿐입니다 - 우리가 지으면 그렇게 접근할 것입니다:

let elem = document.querySelector('#elem');
let style = getComputedStyle(elem); // style에 CSS 속성들이 들어있음

예를 들어, 너비를 출력해 봅시다. 이는 style.width로 합니다:

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

let style = getComputedStyle(elem);
console.log(style.width);

예를 들어, 왼쪽 padding을 출력하려면 - 이렇게 합니다 - style.paddingLeft:

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

let style = getComputedStyle(elem);
console.log(style.paddingLeft);

다음 예제에서 우리는 우리 요소에 대한 모든 관심 있는 CSS 속성을 출력할 것입니다:

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

#elem {
	width: 200px;
	height: 200px;
	padding: 30px;
	border: 20px solid #BCBCBC;
	overflow: auto;
}

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

let style = getComputedStyle(elem);
console.log('paddingLeft: ' + style.paddingLeft); // '30px' 출력
console.log('borderTopWidth: ' + style.borderTopWidth); // '20px' 출력
console.log('borderTopStyle: ' + style.borderTopStyle); // 'solid' 출력

getComputedStyle의 부정확성

때로는 getComputedStyle 함수가 너비와 높이와 관련하여 완전히 정확하게 작동하지 않습니다. 이는 padding와 테두리가 블록을 확장하기 때문입니다. 다음 예제에서 블록에 너비 200px가 지정되어 있고, 또한 패딩과 border도 있습니다. 블록의 실제 너비는 300px이지만, getComputedStyle는 여전히 200px를 출력합니다:

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

#elem {
	width: 200px;
	height: 200px;
	padding: 30px;
	border: 20px solid #BCBCBC;
	overflow: auto;
}

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

let style = getComputedStyle(elem);
console.log('width: ' + style.width); // '200px' 출력
console.log('height: ' + style.height); // '200px' 출력

즉: getComputedStyle가 블록 확장을 무시하고 그 크기를 마치 확장이 없는 것처럼 보여준다는 것입니다. 하지만 이것이 전부는 아닙니다: 또한 스크롤 막대의 유무도 중요합니다 - 일부 브라우저는 getComputedStyle를 통해 계산된 너비에서 스크롤 막대의 너비를 빼지만, 일부는 빼지 않습니다. 여기서는 전혀 크로스 브라우저 호환이 되지 않으며, getComputedStyle를 너비와 높이를 결정하는 데 사용하지 않는 것이 좋습니다. 대신 우리가 조금 후에 배울 메트릭을 사용하세요.

계산된 값

또 다른 뉘앙스가 있습니다: 너비가 %로 지정된 경우 - getComputedStyle 작업 후 우리는 그것을 px 단위로 보게 됩니다. 즉 본질적으로 우리는 지정된 너비가 아니라 계산된 너비를 얻습니다. 다음 예제를 보세요:

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

#elem {
	width: 30%; /* 너비가 %로 지정됨 */
	height: 200px;
	padding: 30px;
	border: 20px solid #BCBCBC;
	overflow: auto;
}

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

let style = getComputedStyle(elem);
console.log('width: ' + style.width); // px 단위의 너비 출력

참고 항목

CSS 스타일을 대량으로 설정하는 속성 cssText,