Window.getComputedStyle()

  • Revision slug: DOM/window.getComputedStyle
  • Revision title: window.getComputedStyle
  • Revision id: 53578
  • Created:
  • Creator: Jabez
  • Is current revision? No
  • Comment /* Syntax */

Revision Content

{{template.DomRef()}}

Summary

Returns computed style of the 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. Should be an empty string for regular elements.
  • style is a CSSStyleDeclaration object.

Example

var element = document.getElementById(“elemId”);
var style = window.getComputedStyle(element, pseudoElt);

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. The elt.style object should be used to set styles on a specific element.

Specification

DOM Level 2 Style: getComputedStyle

Revision Source

<p>
{{template.DomRef()}}
</p>
<h3 name="Summary"> Summary </h3>
<p>Returns computed style of the element. Computed style represents the final <a class="external" href="http://www.w3.org/TR/1998/REC-CSS2-19980512/cascade.html#computed-value">computed</a> values of all CSS properties for the element.
</p>
<h3 name="Syntax"> Syntax </h3>
<pre class="eval">var <i>style</i> = window.getComputedStyle(<i>element</i>, <i>pseudoElt</i>);
</pre>
<ul><li> <code>element</code> is an <a href="en/DOM/element">element</a>.
</li><li> <code>pseudoElt</code> is a string specifying the pseudo-element to match. Should be an empty string for regular elements.
</li><li> <code>style</code> is a <a class="external" href="http://www.w3.org/TR/DOM-Level-2-Style/css.html#CSS-CSSview-getComputedStyle"><code>CSSStyleDeclaration</code></a> object.
</li></ul>
<h3 name="Example"> Example </h3>
<pre class="eval">var element = document.getElementById(“elemId”);
var <i>style</i> = window.getComputedStyle(<i>element</i>, <i>pseudoElt</i>);
</pre>
<h3 name="Description"> 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">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. The <code>elt.style</code> object should be used to set styles on a specific element.
</p>
<h3 name="Specification"> Specification </h3>
<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Style/css.html#CSS-CSSview-getComputedStyle">DOM Level 2 Style: getComputedStyle</a>
</p>
Revert to this revision