Nossos voluntários ainda não traduziram este artigo para o Português (do Brasil). Junte-se a nós e ajude-nos a fazer o trabalho!
Você também pode ler o artigo em English (US).

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

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
Basic support
Non-standard
Chrome No support NoEdge No support NoFirefox Full support 19IE No support NoOpera No support NoSafari No support NoWebView Android No support NoChrome Android No support NoEdge Mobile No support NoFirefox Android Full support 19Opera Android No support NoSafari iOS No support NoSamsung Internet Android ?
Pseudo-element support
Non-standard
Chrome No support NoEdge No support NoFirefox Full support 19IE No support NoOpera No support NoSafari No support NoWebView Android No support NoChrome Android No support NoEdge Mobile No support NoFirefox Android Full support 19Opera Android No support NoSafari iOS No support NoSamsung Internet Android ?

Legend

Full support  
Full support
No support  
No support
Compatibility unknown  
Compatibility unknown
Non-standard. Expect poor cross-browser support.
Non-standard. Expect poor cross-browser support.

Etiquetas do documento e colaboradores

Etiquetas: 
Última atualização por: mfluehr,