Window getComputedStyle() 메서드

  • 이전 페이지
  • 다음 페이지
  • 上一层으로 돌아가기 Window 객체

정의와 사용법

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

요소에서 첫 번째 글자의 계산된 폰트 크기를 가져옵니다(phony 요소를 사용하여):

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

직접 테스트해보세요

문법

window.getComputedStyle(element, pseudoElement)

파라미터

파라미터 설명
element 필수. 스타일을 가져올 요소.
pseudoElement 선택 사항. 가져올伪元素.

반환 값

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

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

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

브라우저 지원

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

크롬 IE 에지 파이어폭스 사파리 오페라
크롬 IE 에지 파이어폭스 사파리 오페라
지원 9-11 지원 지원 지원 지원
  • 이전 페이지
  • 다음 페이지
  • 上一层으로 돌아가기 Window 객체