Window.getComputedStyle()

  • Revision slug: DOM/window.getComputedStyle
  • Revision title: window.getComputedStyle
  • Revision id: 53621
  • Created:
  • Creator: paul.irish
  • Is current revision? No
  • Comment better link for defaultView item; one or more formatting changes

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.
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.

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

defaultView

In many code samples online, getComputedStyle is used from the document.defaultView object. In nearly all cases, this is needless, as getComputedStyle exists on the window object as well.  It's likely the defaultView pattern was some combination of (1) folks not wanting to write a spec for window and (2) making an API that was also usable in Java. However there is a single case where the  defaultView's method must be used: when using Firefox 3.6 to access framed styles. 

Use with pseudo-elements

getComputedStyle can pull style info off of pseudo-elements (for example, ::after, ::before, ::marker, ::line-marker—see spec here).

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

<h3>generated content</h3> 

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

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

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.

The returned value is, in certain known cases, expressly incorrect 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, and/or limit the styles that can be applied using the :visited pseudo-selector. 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 browser have applied similar changes to the application of pseudo-selector styles and the values returned by getComputedStyle.

Browser compatibility

{{ CompatibilityTable() }}

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support {{ CompatVersionUnknown() }} {{ CompatVersionUnknown() }} 9 {{ CompatVersionUnknown() }} {{ CompatVersionUnknown() }}
pseudo-element support {{ CompatVersionUnknown() }} {{ CompatVersionUnknown() }} {{ CompatNo() }} (ticket) {{ CompatNo() }} {{ CompatVersionUnknown() }}
Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support {{ CompatVersionUnknown() }} {{ CompatVersionUnknown() }} WP7 Mango {{ CompatVersionUnknown() }} {{ CompatVersionUnknown() }}
pseudo-element support {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatNo() }} {{ CompatUnknown() }} {{ CompatUnknown() }}

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>
<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>
<p>The returned <code>style</code> is a <a href="/en/DOM/CSSStyleDeclaration" title="en/DOM/CSSStyleDeclaration"><code>CSSStyleDeclaration</code></a> object.</p>
<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). Starting in Gecko 1.9.2 {{ geckoRelease("1.9.2") }}, returned URL values now have quotes around the URL, like this: <code>url("<span class="nowiki">http://foo.com/bar.jpg</span>")</code>.</p>
<h3><code>defaultView</code></h3>
<p>In many code samples online, <code>getComputedStyle</code> is used from the <code>document.defaultView</code> object. In nearly all cases, this is needless, as <code>getComputedStyle</code> exists on the <code>window</code> object as well.  It's likely the defaultView pattern was some combination of (1) folks not wanting to write a spec for window and (2) making an API that was also usable in Java. However there is <a class="link-https" href="https://github.com/jquery/jquery/pull/524#issuecomment-2241183" title="https://github.com/jquery/jquery/pull/524#issuecomment-2241183">a single case</a> where the  <code>defaultView</code>'s method must be used: when using Firefox 3.6 to access framed styles. </p>
<h3>Use with pseudo-elements</h3>
<p>getComputedStyle can pull style info off of pseudo-elements (for example, <code>::after</code>, <code>::before</code>, <code>::marker</code>, <code>::line-marker</code>—see <a class="external" href="http://dev.w3.org/csswg/css3-content/#pseudo-elements">spec</a> here).</p>
<pre class="brush: html">&lt;style&gt;
 h3:after {
   content: ' rocks!';
 }
&lt;/style&gt;

&lt;h3&gt;generated content&lt;/h3&gt; 

&lt;script&gt;
  var h3       = document.querySelector('h3'), 
      cssvalue = getComputedStyle(h3, ':after').getPropertyCSSValue('content'),
      result   = cssvalue &amp;&amp; cssvalue.cssText;

  console.log('the generated content is: ', result); // returns ' rocks!'
&lt;/script&gt;
</pre>
<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>
<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 value is, in certain known cases, expressly incorrect 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 <span style="direction: ltr; ">always return values </span><span style="direction: ltr; ">as if a user has never visited the linked site, </span><span style="direction: ltr; ">and/or limit the styles that can be applied using the <code>:visited</code> pseudo-selector. See </span><a class="external" href="http://blog.mozilla.com/security/2010/03/31/plugging-the-css-history-leak/" style="direction: ltr; ">http://blog.mozilla.com/security/2010/03/31/plugging-the-css-history-leak/</a> and <a class="external" href="http://hacks.mozilla.org/2010/03/privacy-related-changes-coming-to-css-vistited/" style="direction: ltr; ">http://hacks.mozilla.org/2010/03/privacy-related-changes-coming-to-css-vistited/</a> for details of the examples of how this is implemented, most other modern browser have applied similar changes to the application of pseudo-selector styles and the values returned by <span style="direction: ltr; "><code>getComputedStyle</code>.</span></p>
<h3>Browser compatibility</h3>
<p>{{ CompatibilityTable() }}</p>
<div id="compat-desktop"> <table class="compat-table"> <tbody> <tr> <th>Feature</th> <th>Chrome</th> <th>Firefox (Gecko)</th> <th>Internet Explorer</th> <th>Opera</th> <th>Safari</th> </tr> <tr> <td>Basic support</td> <td>{{ CompatVersionUnknown() }}</td> <td>{{ CompatVersionUnknown() }}</td> <td>9</td> <td>{{ CompatVersionUnknown() }}</td> <td>{{ CompatVersionUnknown() }}</td> </tr> <tr> <td>pseudo-element support</td> <td>{{ CompatVersionUnknown() }}</td> <td>{{ CompatVersionUnknown() }}</td> <td>{{ CompatNo() }} (<a class="link-https" href="https://connect.microsoft.com/IE/feedback/details/687834/getcomputedstyle-doesnt-implement-2nd-argument-pseudoelt#details">ticket</a>)</td> <td>{{ CompatNo() }} <!-- 11.50 tested  --></td> <td>{{ CompatVersionUnknown() }} <!-- not in 4.0 --></td> </tr> </tbody> </table>
</div>
<div id="compat-mobile"> <table class="compat-table"> <tbody> <tr> <th>Feature</th> <th>Android</th> <th>Firefox Mobile (Gecko)</th> <th>IE Mobile</th> <th>Opera Mobile</th> <th>Safari Mobile</th> </tr> <tr> <td>Basic support</td> <td>{{ CompatVersionUnknown() }}</td> <td>{{ CompatVersionUnknown() }}</td> <td>WP7 Mango</td> <td>{{ CompatVersionUnknown() }}</td> <td>{{ CompatVersionUnknown() }}</td> </tr> <tr> <td>pseudo-element support</td> <td>{{ CompatUnknown() }}</td> <td>{{ CompatUnknown() }}</td> <td>{{ CompatNo() }}</td> <td>{{ CompatUnknown() }}</td> <td>{{ CompatUnknown() }}</td> </tr> </tbody> </table>
</div>
<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