Window.getComputedStyle()

  • Revision slug: DOM/window.getComputedStyle
  • Revision title: window.getComputedStyle
  • Revision id: 53598
  • Created:
  • Creator: Brettz9
  • Is current revision? No
  • Comment syntax coloring; no wording changes

Revision Content

{{ DomRef() }}

Summary

getComputedStyle() returns the computed style of an element. Computed style represents the final computed values of all CSS properties for the element.

Syntax

var style = window.getComputedStyle(element, pseudoElt);
  • element is an element.
  • pseudoElt is a string specifying the pseudo-element to match. Must be null for regular elements.
  • style is a CSSStyleDeclaration object.

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_minversion_note("1.9.2", 'Starting in ' .. gecko("1.9.2") .. ', returned URL values now have quotes around the URL, like this: url("http://foo.com/bar.jpg").') }}

Specification

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

Revision Source

<p>{{ DomRef() }}</p>
<h3>Summary</h3>
<p><code>getComputedStyle() </code>returns the computed style of an element. Computed style represents the final <a class="internal" href="/en/CSS/computed_value" title="en/CSS/computed value">computed values</a> of all CSS properties for the element.</p>
<h3>Syntax</h3>
<pre class="eval">var <em>style</em> = window.getComputedStyle(<em>element</em>, <em>pseudoElt</em>);
</pre>
<ul> <li><code>element </code>is an <a href="/en/DOM/element" title="en/DOM/element">element</a>.</li> <li><code>pseudoElt </code>is a string specifying the pseudo-element to match. Must be<code> null </code>for regular elements.</li> <li><code>style </code>is a <a href="/en/DOM/CSSStyleDeclaration" title="en/DOM/CSSStyleDeclaration"><code>CSSStyleDeclaration</code></a> object.</li>
</ul>
<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>
<p>{{ gecko_minversion_note("1.9.2", 'Starting in ' .. gecko("1.9.2") .. ', returned URL values now have quotes around the URL, like this: <code>url("http://foo.com/bar.jpg")</code>.') }}</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