Please note, this is a STATIC archive of website developer.mozilla.org from 03 Nov 2016, cach3.com does not collect or store any user information, there is no "phishing" involved.

この記事は技術レビューを必要としています。ぜひご協力ください

この記事はまだボランティアによって 日本語 に翻訳されていません。ぜひ MDN に参加して翻訳を手伝ってください!

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.

getDefaultComputedStyle() 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]);
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.

The returned style is a CSSStyleDeclaration object.

Example

var elem1 = document.getElementById("elemId");
var style = window.getDefaultComputedStyle(elem1);
<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>   

Description

The returned object is of the same type as the object returned by getComputedStyle, but only takes into account user-agent and user rules.

Use with pseudo-elements

getDefaultComputedStyle can pull style info from pseudo-elements (for example, ::after, ::before).

<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 https://blog.mozilla.com/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

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support Not supported 19 Not supported Not supported Not supported
pseudo-element support Not supported 19 Not supported Not supported Not supported
Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support Not supported 19 7.5 Not supported Not supported
pseudo-element support Not supported 19 Not supported Not supported Not supported

ドキュメントのタグと貢献者

 このページの貢献者: Sebastianz, phistuck, fscholz, cpigat, teoli, kscarfone, Sheppy, Krinkle, ethertank, Bzbarsky
 最終更新者: Sebastianz,