창 getComputedStyle()
예시
요소의 계산된 배경색을 가져옵니다.
const element = document.getElementById("test");
const cssObj = window.getComputedStyle(element, null);
let bgColor = cssObj.getPropertyValue("background-color");
아래에 더 많은 예가 있습니다.
정의 및 사용
이 getComputedStyle()
메서드는 계산된 CSS 속성과 HTML 요소의 값을 가져옵니다.
이 getComputedStyle()
메서드는 를 반환합니다
CSSStyleDeclaration object
.
계산된 스타일
계산된 스타일은 모든 스타일 소스가 적용된 후 요소에 사용된 스타일입니다.
스타일 소스: 외부 및 내부 스타일 시트, 상속된 스타일 및 브라우저 기본 스타일.
또한보십시오:
통사론
window.getComputedStyle(element, pseudoElement)
매개변수
Parameter | Description |
element | Required. The element to get the computed style for. |
pseudoElement | Optional. A pseudo-element to get. |
반환 값
유형 | 설명 |
객체 | 요소의 모든 CSS 속성과 값이 있는 CSSStyleDeclaration 개체입니다. |
더 많은 예
요소에서 모든 계산된 스타일 가져오기:
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>";
}
요소에서 첫 번째 문자의 계산된 글꼴 크기 가져오기(의사 요소 사용):
const element = document.getElementById("test");
const cssObj = window.getComputedStyle(element, ":first-letter")
let size = cssObj.getPropertyValue("font-size");
브라우저 지원
getComputedStyle()
모든 브라우저에서 지원됩니다:
Chrome | IE | Edge | Firefox | Safari | Opera |
Yes | 9-11 | Yes | Yes | Yes | Yes |