Window: getComputedStyle() method

element

The Element for which to get the computed style.

pseudoElt Optional

A string specifying the pseudo-element to match. Omitted (or null) for real elements.

A live CSSStyleDeclaration object, which updates automatically when the element's styles are changed.

TypeError

If the passed object is not an Element or the pseudoElt is not a valid pseudo-element selector or is ::part() or ::slotted().

Note: Valid pseudo-element selector refers to syntactic validity, e.g. ::unsupported is considered valid, even though the pseudo-element itself is not supported. Additionally, the latest W3 standard explicitly supports only ::before and ::after, while the CSS WG draft does not restrict this value. Browser compatibility may vary.

In this example we style a <p> element, then retrieve those styles using getComputedStyle(), and print them into the text content of the <p>.

The returned object is the same CSSStyleDeclaration type as the object returned from the element's style property. However, the two objects have different purposes:

• The object from getComputedStyle is read-only, and should be used to inspect the element's style — including those set by a <style> element or an external stylesheet.
• The element.style object should be used to set styles on that element, or inspect styles directly added to it from JavaScript manipulation or the global style attribute.

The first argument must be an Element. Non-elements, like a Text node, will throw an error.

In many code samples, 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 a combination of folks not wanting to write a testing spec for window and making an API that was also usable in Java.

getComputedStyle can pull style info from pseudo-elements (such as ::after, ::before, ::marker, ::line-marker — see the pseudo-element spec).

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

<h3>Generated content</h3>

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

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

• The returned CSSStyleDeclaration object contains active values for CSS property longhand names as well as shorthand names. For example, the returned object contains entries for border-bottom-width in addition to the border-width and border shorthand property names. You can query values with longhand names like font-size as well as shorthand names like font.
• CSS property values may be accessed using the getPropertyValue(propName) method or by indexing directly into the object using array or dot notation such as obj['z-index'] or obj.zIndex.
• The values returned by getComputedStyle are resolved values. These are usually the same as CSS 2.1's computed values, but for some older properties like width, height, or padding, they are instead the same as used values. Originally, CSS 2.0 defined the computed values as the "ready to be used" final values of properties after cascading and inheritance, but CSS 2.1 redefined them as pre-layout, and used values as post-layout. For CSS 2.0 properties, getComputedStyle returns the old meaning of computed values, now called used values. An example difference between pre- and post-layout values includes the resolution of percentages for width or height, as those will be replaced by their pixel equivalent only for used values.
• Returned values are sometimes deliberately inaccurate. To avoid the "CSS History Leak" security issue, browsers may lie about the computed styles for a visited link, returning values as if the user never visited the linked URL. See Plugging the CSS history leak and Privacy-related changes coming to CSS :visited for examples of how this is implemented.
• During CSS transitions, getComputedStyle returns the original property value in Firefox, but the final property value in WebKit.
• In Firefox, properties with the value auto return the used value, not the value auto. So if you apply top:auto and bottom:0 on an element with height:30px and a containing block of height:100px, Firefox's computed style for top returns 70px, as 100 − 30 = 70.

• window.getDefaultComputedStyle()
• getPropertyValue()
• Resolved Value