Window getComputedStyle() 메서드

정의와 사용법

getComputedStyle() 메서드는 HTML 요소의 계산 CSS 속성과 값을 가져옵니다.

getComputedStyle() 메서드는 CSSStyleDeclaration 객체를 반환합니다.

계산 스타일

계산 스타일은 모든 스타일 출처가 적용된 후 요소에 사용된 스타일을 의미합니다.

스타일 출처: 외부와 내부 스타일 시트, 상속된 스타일 및 브라우저 기본 스타일.

다른 것도 참조하세요:

CSSStyleDeclaration 객체

실例

예제 1

요소의 계산 배경색을 가져옵니다:

const element = document.getElementById("test");
const cssObj = window.getComputedStyle(element, null);
let bgColor = cssObj.getPropertyValue("background-color");

직접 시도해 보세요

예제 2

요소에서 모든 계산 스타일을 가져옵니다:

const element = document.getElementById("test");
const cssObj = window.getComputedStyle(element, null);
let text = "";
for (x in cssObj) {
  cssObjProp = cssObj.item(x);
  text += cssObjProp + " = " + cssObj.getPropertyValue(cssObjProp) + "<br>";
}

직접 시도해 보세요

예제 3

요소 중 첫 번째 글자의 계산 글자 크기를 가져옵니다(페seudoElement를 사용하여):

const element = document.getElementById("test"); const cssObj = window.getComputedStyle(element, ":first-letter");
let size = cssObj.getPropertyValue("font-size");

직접 시도해 보세요

문법

window.getComputedStyle(element, pseudoElement)

파라미터

파라미터 설명
element 必需입니다. 계산 스타일을 가져올 요소.
pseudoElement 선택 사항입니다. 가져오려는 페seudoElement.

반환 값

형식 설명
객체 요소의 모든 CSS 속성과 값을 가진 CSSStyleDeclaration 객체.

getComputedStyle() 메서드와 style 속성의 차이

getComputedStyle() 메서드와 HTMLElement의 style 속성을 비교하세요: 후자는 단순히 요소의 인라인 스타일에 액세스를 허용하며, 귀하가 지정한 어떤 단위도 사용할 수 있으며, 요소 스타일 시트 스타일에 적용된 어떤 정보도 알려줄 수 없습니다.

브라우저 지원

모든 브라우저가 지원합니다 getComputedStyle()：

크롬 IE 에지 파이어폭스 사파리 오페라
크롬 IE 에지 파이어폭스 사파리 오페라
지원 9-11 지원 지원 지원 지원