We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS




getDefaultComputedStyle() 给出元素的所有CSS属性的默认计算值(computed values ),忽略作者样式。也就是说,只考虑用户代理和用户风格。


let style = window.getDefaultComputedStyle(element[, pseudoElt]);
pseudoElt 可选
指定匹配的伪类. 通常情况下可以为空.

返回的样式是一个 CSSStyleDeclaration 对象.


var elem1 = document.getElementById("elemId");
var style = window.getDefaultComputedStyle(elem1);
#elem-container {
   position: absolute;
   left:     100px;
   top:      200px;
   height:   100px;

<div id="elem-container">dummy</div>
<div id="output"></div>  

    var elem = document.getElementById("elem-container");
    var theCSSprop = window.getDefaultComputedStyle(elem).position;
    document.getElementById("output").innerHTML = theCSSprop; // 将会输出 "static"


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


getDefaultComputedStyle 同样可以从伪元素中获取属性 (比如, ::after, ::before).

 h3:after {
   content: ' rocks!';

<h3>generated content</h3> 

  var h3       = document.querySelector('h3'), 
      result   = getDefaultComputedStyle(h3, ':after').content;

  console.log('the generated content is: ', result); // 返回 'none'


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.


Proposed to the CSS working group.


We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

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


此页面的贡献者: xgqfrms-GitHub, ektx
最后编辑者: xgqfrms-GitHub,