Non-standard This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future.
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
var style = window.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.
Example
Simple example
var elem1 = document.getElementById("elemId");
var style = window.getDefaultComputedStyle(elem1);
Longer example
<style>
#elem-container {
position: absolute;
left: 100px;
top: 200px;
height: 100px;
}
</style>
<div id="elem-container">dummy</div>
<div id="output"></div>
<script>
var elem = document.getElementById("elem-container");
var theCSSprop = window.getDefaultComputedStyle(elem).position;
document.getElementById("output").innerHTML = theCSSprop; // Will output "static"
</script>
Use with pseudo-elements
The getDefaultComputedStyle()
method can pull style info from pseudo-elements (e.g., ::before
or ::after
).
<style>
h3:after {
content: ' rocks!';
}
</style>
<h3>generated content</h3>
<script>
var h3 = document.querySelector('h3'),
result = getDefaultComputedStyle(h3, ':after').content;
console.log('the generated content is: ', result); // returns 'none'
</script>
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 http://blog.mozilla.com/security/2010/03/31/plugging-the-css-history-leak/ and http://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
The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Update compatibility data on GitHub
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
Chrome
No support No |
Edge
No support No |
Firefox
Full support 19 |
IE
No support No |
Opera
No support No |
Safari
No support No |
WebView Android
No support No |
Chrome Android
No support No |
Firefox Android
Full support 19 |
Opera Android
No support No |
Safari iOS
No support No |
Samsung Internet Android
No support No | |
Pseudo-element support |
Chrome
No support No |
Edge
No support No |
Firefox
Full support 19 |
IE
No support No |
Opera
No support No |
Safari
No support No |
WebView Android
No support No |
Chrome Android
No support No |
Firefox Android
Full support 19 |
Opera Android
No support No |
Safari iOS
No support No |
Samsung Internet Android
No support No |
Legend
- Full support
- Full support
- No support
- No support
- Non-standard. Expect poor cross-browser support.'
- Non-standard. Expect poor cross-browser support.
Window.getDefaultComputedStyle() by Mozilla Contributors is licensed under CC-BY-SA 2.5.