Window.getComputedStyle()

  • Revision slug: DOM/window.getComputedStyle
  • Revision title: window.getComputedStyle
  • Revision id: 53607
  • Created:
  • Creator: Sheppy
  • Is current revision? No
  • Comment Reverted to earlier version; 11 words added, 2 words removed

Revision Content

{{ DomRef() }}

Summary

getComputedStyle() gives the final used values of all the CSS properties of an element.

Syntax

var style = window.getComputedStyle(element[, pseudoElt]);
element
The {{ domxref("Element") }} for which to get the computed style.
pseudoElt {{ optional_inline() }}
A string specifying the pseudo-element to match. Must be null (or not specified) for regular elements.

The returned style is a CSSStyleDeclaration object.

Note: Prior to Gecko 2.0 {{ geckoRelease("2.0") }}, the pseudoElt parameter was required. No other major browser required this parameter be specified if null. Gecko has been changed to match the behavior of other browsers.

Example

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>

Description

The returned object is of the same type that the object returned from the element's style property, however the two objects have different purpose. The object returned from getComputedStyle is read-only and can be used to inspect the element's style (including those set by a <style> element or an external stylesheet). The elt.style object should be used to set styles on a specific element.

The first argument must be an Element, not a Node (as in a #text Node).

{{ gecko_callout_heading("1.9.2") }}

Starting in Gecko 1.9.2 {{ geckoRelease("2.0") }}, returned URL values now have quotes around the URL, like this: url("http://foo.com/bar.jpg").

Notes

The returned object actually represents the CSS 2.1 used values, not the computed values. Originally, CSS 2.0 defined the computed values to be the "ready to be used" values of properties after cascading and inheritance, but CSS 2.1 redefined computed values as pre-layout, and used values as post-layout. The getComputedStyle function returns the old meaning of computed values, now called used values. There is no DOM API to get CSS 2.1 computed values.

Specification

{{ languages( { "ja": "ja/DOM/window.getComputedStyle" } ) }}

Revision Source

<p>{{ DomRef() }}</p>
<h3>Summary</h3>
<p><code>getComputedStyle() </code>gives the final <a href="/en/CSS/used_value" title="https://developer.mozilla.org/en/CSS/used_value">used values</a> of all the CSS properties of an element.</p>
<h3>Syntax</h3>
<pre class="eval">var <em>style</em> = window.getComputedStyle(<em>element</em>[, <em>pseudoElt</em>]);
</pre>
<dl> <dt>element</dt> <dd>The {{ domxref("Element") }} for which to get the computed style.</dd> <dt>pseudoElt {{ optional_inline() }}</dt> <dd>A string specifying the pseudo-element to match. Must be<code> null </code>(or not specified) for regular elements.</dd>
</dl>
<p>The returned <code>style</code> is a <a href="/en/DOM/CSSStyleDeclaration" title="en/DOM/CSSStyleDeclaration"><code>CSSStyleDeclaration</code></a> object.</p>
<div class="note"><strong>Note:</strong> Prior to Gecko 2.0 {{ geckoRelease("2.0") }}, the <code>pseudoElt</code> parameter was required. No other major browser required this parameter be specified if null. Gecko has been changed to match the behavior of other browsers.</div>
<h3>Example</h3>
<pre class="brush: js">var elem1 = document.getElementById("elemId");
var style = window.getComputedStyle(elem1, null);

// this is equivalent:
// var style = document.defaultView.getComputedStyle(elem1, null);
</pre>
<pre class="brush: js">&lt;style&gt;
 #elem_container{
   position: absolute;
   left:     100px;
   top:      200px;
   height:   100px;
 }
&lt;/style&gt;

&lt;div id="elem_container"&gt;dummy&lt;/div&gt;
&lt;div id="output"&gt;&lt;/div&gt;  

&lt;script&gt;
  function getTheStyle(){
    var elem= document.getElementById("elem_container");
    var theCSSprop= window.getComputedStyle(elem,null).getPropertyValue("height");
    document.getElementById("output").innerHTML= theCSSprop;
   }
  getTheStyle();
&lt;/script&gt;
</pre>
<h3>Description</h3>
<p>The returned object is of the same type that the object returned from the element's <a href="/en/DOM/element.style" title="en/DOM/element.style">style</a> property, however the two objects have different purpose. The object returned from<code> getComputedStyle </code>is read-only and can be used to inspect the element's style (including those set by a<code> &lt;style&gt; </code>element or an external stylesheet). The<code> elt.style </code>object should be used to set styles on a specific element.</p>
<p>The first argument must be an Element, not a Node (as in a #text Node).</p>
<div class="geckoVersionNote">
<p>{{ gecko_callout_heading("1.9.2") }}</p>
<p>Starting in Gecko 1.9.2 {{ geckoRelease("2.0") }}, returned URL values now have quotes around the URL, like this: <code>url("<span class="nowiki">http://foo.com/bar.jpg</span>")</code>.</p>
</div><h3>Notes</h3>
<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.7em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">The returned object actually represents the CSS 2.1 <a href="/en/CSS/used_value" style="text-decoration: none; color: rgb(4, 137, 183) !important; cursor: default; " title="en/CSS/used_value">used values</a>, not the <a href="/en/CSS/computed_value" style="text-decoration: none; color: rgb(4, 137, 183) !important; cursor: default; " title="en/CSS/computed_value">computed values</a>. Originally, CSS 2.0 defined the computed values to be the "ready to be used" values of properties after cascading and inheritance, but CSS 2.1 redefined computed values as pre-layout, and used values as post-layout. The <code>getComputedStyle</code> function returns the old meaning of computed values, now called <strong>used values</strong>. There is no DOM API to get CSS 2.1 computed values.</p>
<h3>Specification</h3>
<ul> <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Style/css.html#CSS-CSSview-getComputedStyle">DOM Level 2 Style: getComputedStyle</a></li>
</ul>
<p>{{ languages( { "ja": "ja/DOM/window.getComputedStyle" } ) }}</p>
Revert to this revision