Window: getComputedStyle() method
=================================

 The
 **`Window.getComputedStyle()`** method returns an object
 containing the values of all CSS properties of an element, after applying active
 stylesheets and resolving any basic computation those values may contain.

 Individual CSS property values are accessed through APIs provided by the object, or by
 indexing with CSS property names.

Syntax
------


```js
getComputedStyle(element)
getComputedStyle(element, pseudoElt)
```

### Parameters

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


### Return value

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

### Exceptions

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


Examples
--------

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

### HTML


```html
<p>Hello</p>
```

### CSS


```css
p {
  width: 400px;
  margin: 0 auto;
  padding: 20px;
  font: 2rem/2 sans-serif;
  text-align: center;
  background: purple;
  color: white;
}
```

### JavaScript


```js
const para = document.querySelector("p");
const compStyles = window.getComputedStyle(para);
para.textContent =
  `My computed font-size is ${compStyles.getPropertyValue("font-size")},\n` +
  `and my computed line-height is ${compStyles.getPropertyValue(
 "line-height",
 )}.`;
```

### Result

Description
-----------

 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.

defaultView
-----------

 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.

Use with pseudo-elements
------------------------

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


```html
<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>
```

Notes
-----

* The returned `CSSStyleDeclaration` object contains active values for
 CSS property ***longhand*** names. For example,
 `border-bottom-width` instead of the `border-width` and
 `border` shorthand property names. It is safest to query values with only longhand names like
 `font-size`. Shorthand names like `font` will not work with most
 browsers.
* CSS property values may be accessed using the
 `getPropertyValue(propName)` API or by indexing directly into the object
 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.
Specifications
--------------

| Specification |
| --- |
| CSS Object Model (CSSOM) # dom-window-getcomputedstyle |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* `window.getDefaultComputedStyle`
* `Resolved Value`