현재 번역은 완벽하지 않습니다. 한국어로 문서 번역에 동참해주세요.

요약

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

구문

var style = window.getComputedStyle(element[, pseudoElt]);
element
속성값을 얻으려하는 Element.
pseudoElt Optional
일치시킬 의사요소(pseudo element)를 지정하는 문자열. 보통의 요소들에 대해서는 생략되거나 null이어야 함.
Note: Gecko 2.0 (Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1) 이전에는 pseudoElt 매개 변수가 필요했습니다. 다른 주요 브라우저에서는 pseudoElt 매개변수의 값이 null 인 경우에는 생략해도 됩니다. Gecko는 다른 브라우저의 동작과 일치하도록 변경되었습니다.

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

예제

var elem1 = document.getElementById("elemId");
var style = window.getComputedStyle(elem1, null);

// this is equivalent:
// var style = document.defaultView.getComputedStyle(elem1, null);
<style>
 #elem-container{
   position: absolute;
   left:     100px;
   top:      200px;
   height:   100px;
 }
</style>

<div id="elem-container">dummy</div>
<div id="output"></div>  

<script>
  function getTheStyle(){
    var elem = document.getElementById("elem-container");
    var theCSSprop = window.getComputedStyle(elem,null).getPropertyValue("height");
    document.getElementById("output").innerHTML = theCSSprop;
   }
  getTheStyle();
</script>
function dumpComputedStyles(elem,prop) {

  var cs = window.getComputedStyle(elem,null);
  if (prop) {
    console.log(prop+" : "+cs.getPropertyValue(prop));
    return;
  }
  var len = cs.length;
  for (var i=0;i<len;i++) {
 
    var style = cs[i];
    console.log(style+" : "+cs.getPropertyValue(style));
  }

}

설명

메소드의 호출에서 반환되는 객체는 요소의 style 속성에서 반환되는 객체와 동일한 유형입니다. 그러나 두 객체는 다른 목적을 가지고 있습니다. getComputedStyle에서 반환된 객체는 읽기 전용이며 요소의 (<style> 또는 외부 stylesheet로 설정되는 것도 포함해서) 스타일을 검사하는 데 사용할 수 있습니다. elt.style 객체는 특정한 요소에 스타일을 설정하는 데 사용해야합니다.

첫 번째 인수는 요소여야합니다. (#text 노드같은 비-요소 노드를 전달하면 오류가 발생합니다). Gecko 1.9.2 (Firefox 3.6 / Thunderbird 3.1 / Fennec 1.0)부터는, 반환되는 URL 값에는 url("http://foo.com/bar.jpg")과 같이 URL 주위에 따옴표가 있습니다.

defaultView

온라인의 많은 코드 샘플중에서, getComputedStyledocument.defaultView객체에서 사용됩니다만, 대개의 경우에는 getComputedStylewindow객체에도 존재하므로 document.defaultView객체에서 사용하는 패턴은 필요하지 않습니다. defaultView패턴은 (1) window 스펙을 작성하고 싶지 않은 사람들과 (2) Java에서도 사용할 수있는 API를 만드는 것의 조합이었을 가능성이 큽니다. 그러나 defaultView의 메소드를 사용해야만하는 경우가 하나 있습니다. Firefox 3.6을 사용하여 프레임 스타일(framed styles)에 액세스하는 경우입니다.

의사요소 사용하기

getComputedStyle은 의사요소(pseudo-elements,  ::after, ::before, ::marker, ::line-markerspec참고)에서 스타일 정보를 가져올 수 있습니다.

<style>
 h3::after {
   content: ' rocks!';
 }
</style>

<h3>generated content</h3> 

<script>
  var h3       = document.querySelector('h3');
  var result   = getComputedStyle(h3, ':after').content;

  console.log('the generated content is: ', result); // returns ' rocks!'
</script>

Notes

반환되는 CSSStyleDeclaration 객체는 지원되는 모든 CSS속성의 본디속성(longhand)명에 대한 값을 갖게 됩니다. 예로, 본디속성명 border-bottom-width의 경우를 보면, border-widthborder같은 단축속성명이 사용됩니다. font-size과 같은 본디속성명만을 사용하여 속성값을 질의하는 것이 안전합니다. font같은 단축속성명을 사용하여 질의하는 것은 대부분의 브라우저에서 동작하지 않을 것입니다.

CSS속성 값은 getPropertyValue(propName) API를 사용하거나,  cs[' z-index'] 또는 cs.zIndex 같은 방식으로 객체에 직접 인덱싱하여 액세스할 수 있습니다.

The values returned by getComputedStyle are known as resolved values. These are usually the same as the CSS 2.1 computed values, but for some older properties like width, height or padding, they are instead the used values. Originally, CSS 2.0 defined the computed values to be the "ready to be used" final values of properties after cascading and inheritance, but CSS 2.1 redefined computed values as pre-layout, and used values as post-layout. For CSS 2.0 properties, the getComputedStyle function returns the old meaning of computed values, now called used values. An example of difference between pre- and post-layout values includes the resolution of percentages that represent the width or the height of an element (also known as its layout), as those will be replaced by their pixel equivalent only in the used value case.

The returned value is, in certain known cases, expressly inaccurate by deliberate intent. In particular, to avoid the so called CSS History Leak security issue, browsers may expressly "lie" about the used value for a link and always return values as if a user has never visited the linked site. See http://blog.mozilla.com/security/2010/03/31/plugging-the-css-history-leak/ and http://hacks.mozilla.org/2010/03/privacy-related-changes-coming-to-css-vistited/ for details of the examples of how this is implemented. Most other modern browsers have applied similar changes to the application of pseudo-selector styles and the values returned by getComputedStyle.

During a CSS transition, getComputedStyle returns the original property value in Firefox, but the final property value in WebKit.

그래서, 만약 height:100px;의 블록안에서 height:30px;의 속성을 가진 요소가 있고, 그 요소에 대해 top:auto;bottom:0;를 적용한 후에, top의 (계산된)style값을 요청하면, Firefox는 100px-30px = 70px의 결과로 top:70px를 반환합니다.

사양

같이 보기

문서 태그 및 공헌자

이 페이지의 공헌자: sominlee, dotorify, dalgos, fscholz, sirparang
최종 변경: sominlee,