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 defaultcomputed 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
elementThe
Elementfor which to get the computed style.pseudoEltOptionalA string specifying the pseudo-element to match. Must be
null(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 elem = document.getElementById("elemId");const style = getDefaultComputedStyle(elem);Longer example
<div>dummy</div><div></div>#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).
<h3>generated content</h3>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.
Specifications
Proposed to the CSS working group.