Window.getComputedStyle()

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

Window.getComputedStyle() 메소드는 인자로 전달받은 요소의 모든 CSS 속성값을 담은 객체를 회신합니다. 이 속성값들은, 해당 요소에 대하여 활성 스타일시트와 속성값에 대한 기본 연산이 모두 반영된 결과값입니다. 개별 CSS속성 값은 객체를 통해 제공되는 API 또는 CSS 속성 이름을 사용해서 간단히 색인화해서 액세스할 수 있습니다.

구문

js
var style = window.getComputedStyle(element[, pseudoElt]);
element

속성값을 얻으려하는 Element.

pseudoElt Optional

일치시킬 의사요소(pseudo element)를 지정하는 문자열. 보통의 요소들에 대해서는 생략되거나 null이어야 함.

반환되는 style은 요소의 스타일이 변경 될 때 자동으로 업데이트되는 실시간 CSSStyleDeclaration 객체입니다.

예제

이 예제에서는 간단한

요소에 CSS스타일을 적용하고, getComputedStyle()를 사용해서 적용된 스타일값을 찾아낸 후에
의 본문으로 출력합니다.

html
Hello
css
p {
  width: 400px;
  margin: 0 auto;
  padding: 20px;
  line-height: 2;
  font-size: 2rem;
  font-family: sans-serif;
  background: purple;
  color: white;
  text-align: center;
}
js
let para = document.querySelector("p");
let compStyles = window.getComputedStyle(para);
para.textContent =
  "My computed font-size is " +
  compStyles.getPropertyValue("font-size") +
  ",\nand my computed line-height is " +
  compStyles.getPropertyValue("line-height") +
  ".";

결과

설명

메소드의 호출에서 반환되는 객체의 자료형은 요소의 style 속성에서 반환되는 객체와 동일한 CSSStyleDeclaration형입니다. 그러나 두 객체는 다른 목적을 가지고 있습니다. getComputedStyle 에서 반환된 객체는 읽기 전용이며 요소의 (

generated content