Window: getDefaultComputedStyle() method

Non-standard: This feature is not standardized. We do not recommend using non-standard features in production, as they have limited browser support, and may change or be removed. However, they can be a suitable alternative in specific cases where no standard option exists.

The getDefaultComputedStyle() method gives the default computed values of all the CSS properties of an element, ignoring author styling. That is, only user-agent and user styles are taken into account.

Syntax

js
getDefaultComputedStyle(element)
getDefaultComputedStyle(element, pseudoElt)

Parameters

element

The Element for which to get the computed style.

pseudoElt Optional

A string specifying the pseudo-element to match. Must be null (or not specified) for regular elements.

Return value

The returned style is a CSSStyleDeclaration object. The object is of the same type as the object returned by Window.getComputedStyle(), but only takes into account user-agent and user rules.

Examples

Simple example

js
const elem = document.getElementById("elemId");
const style = getDefaultComputedStyle(elem);

Longer example

html
<div id="elem-container">dummy</div>
<div id="output"></div>
css
#elem-container {
  position: absolute;
  left: 100px;
  top: 200px;
  height: 100px;
}
js
const elem = document.getElementById("elem-container");
const theCSSprop = getDefaultComputedStyle(elem).position;
document.getElementById("output").textContent = theCSSprop; // outputs "static"

Use with pseudo-elements

The getDefaultComputedStyle() method can pull style info from pseudo-elements (e.g., ::before or ::after).

html
<h3>generated content</h3>
css
h3::after {
  content: " rocks!";
}
js
const h3 = document.querySelector("h3");
const result = getDefaultComputedStyle(h3, "::after").content;

console.log("the generated content is: ", result); // returns 'none'

Notes

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 https://blog.mozilla.org/security/2010/03/31/plugging-the-css-history-leak/ and https://hacks.mozilla.org/2010/03/privacy-related-changes-coming-to-css-vistited/ for details of the examples of how this is implemented.

Specifications

Proposed to the CSS working group.

Browser compatibility

desktop mobile server
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
Deno
getDefaultComputedStyle
Non-standard
Chrome – No support
Chrome
footnote No support
Edge – No support
Edge
footnote No support
Firefox – Full support
Firefox 19 (Release date: 2013-02-19)
footnote Full support
Opera – No support
Opera
footnote No support
Safari – No support
Safari
footnote No support
Chrome Android – No support
Chrome Android
footnote No support
Firefox for Android – Full support
Firefox for Android 19 (Release date: 2013-02-19)
footnote Full support
Opera Android – No support
Opera Android
footnote No support
Safari on iOS – No support
Safari on iOS
footnote No support
Samsung Internet – No support
Samsung Internet
footnote No support
WebView Android – No support
WebView Android
footnote No support
WebView on iOS – No support
WebView on iOS
footnote No support
Deno – No support
Deno
footnote No support
Pseudo-element support
Non-standard
Chrome – No support
Chrome
footnote No support
Edge – No support
Edge
footnote No support
Firefox – Full support
Firefox 19 (Release date: 2013-02-19)
footnote Full support
Opera – No support
Opera
footnote No support
Safari – No support
Safari
footnote No support
Chrome Android – No support
Chrome Android
footnote No support
Firefox for Android – Full support
Firefox for Android 19 (Release date: 2013-02-19)
footnote Full support
Opera Android – No support
Opera Android
footnote No support
Safari on iOS – No support
Safari on iOS
footnote No support
Samsung Internet – No support
Samsung Internet
footnote No support
WebView Android – No support
WebView Android
footnote No support
WebView on iOS – No support
WebView on iOS
footnote No support
Deno – No support
Deno
footnote No support

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support
Non-standard. Check cross-browser support before using.