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.

ThegetDefaultComputedStyle() method gives the default computed values of all the CSSproperties of an element, ignoring author styling. That is, only user-agent and userstyles are taken into account.

Syntax

getDefaultComputedStyle(element)getDefaultComputedStyle(element, pseudoElt)

Parameters

element: TheElement for which to get the computed style.
pseudoEltOptional: A string specifying the pseudo-element to match. Must benull (or notspecified) for regular elements.

Return value

The returnedstyle is aCSSStyleDeclarationobject. The object is of the same type as the object returned byWindow.getComputedStyle(), but only takes into account user-agent anduser rules.

Examples

Simple example

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

Longer example

html

<div>dummy</div><div></div>

css

#elem-container {  position: absolute;  left: 100px;  top: 200px;  height: 100px;}

const elem = document.getElementById("elem-container");const theCSSprop = getDefaultComputedStyle(elem).position;document.getElementById("output").textContent = theCSSprop; // outputs "static"

Use with pseudo-elements

ThegetDefaultComputedStyle() method can pull style info frompseudo-elements (e.g.,::before or::after).

html

<h3>generated content</h3>

css

h3::after {  content: " rocks!";}

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 deliberateintent. In particular, to avoid the so called CSS History Leak security issue, browsersmay expressly "lie" about the used value for a link and always return values as if auser has never visited the linked site, and/or limit the styles that can be appliedusing the:visited pseudo-selector. Seehttps://blog.mozilla.org/security/2010/03/31/plugging-the-css-history-leak/andhttps://hacks.mozilla.org/2010/03/privacy-related-changes-coming-to-css-vistited/for details of the examples of how this is implemented.