Window.getComputedStyle()

摘要

Window.getComputedStyle()方法得出所有在应用有效的样式和分解任何可能会包含值的基础计算后的元素的CSS属性值。

语法

var style = window.getComputedStyle(element, [pseudoElt]);

element

 用于计算样式的元素

pseudoElt 可选

指定一个伪元素进行匹配。对于常规的元素来说可省略。

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

示例

var elem1 = document.getElementById("elemId");
var style = window.getComputedStyle(elem1, null);

// 它等价于
// var style = document.defaultView.getComputedStyle(elem1, null);

<style>
 #elem-container{
   position: absolute;
   left:     100px;
   top:      200px;
   height:   100px;
 }
</style>

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

<script>
  function getTheStyle(){
    var elem = document.getElementById("elem-container");
    var theCSSprop = window.getComputedStyle(elem,null).getPropertyValue("height");
    document.getElementById("output").innerHTML = theCSSprop;
   }
  getTheStyle();
</script>

function dumpComputedStyles(elem,prop) {

  var cs = window.getComputedStyle(elem,null);
  if (prop) {
    dump("    "+prop+" : "+cs.getPropertyValue(prop)+"\n");
    return;
  }
  var len = cs.length;
  for (var i=0;i<len;i++) {
 
    var style = cs[i];
    dump("    "+style+" : "+cs.getPropertyValue(style)+"\n");
  }

}

类型

getComputedStyle 返回的对象跟 element 调用 style 属性返回的对象是同一种类型，可以称为 CSSStyleDeclaration. 但两个对象有不同的用处， getComplutedSytle返回的对象是只读对象， 用于检测元素的样式（包括在<style> 和 外部的样式，即浏览器计算后的样式）。 elt.style 对象用于设置元素上的内联样式.

getComputedStyle的第一个参数必须是Element对象(如果不是Element节点， 如 #text Node 文字类型， 将会抛出错误). getComputedStyle 在1.9.2 开始支持(Firefox 3.6 / Thunderbird 3.1 / Fennec 1.0).

defaultView

在许多在线的演示代码中, getComputedStyle 是通过 document.defaultView 对象来调用的。 大部分情况下，这是不需要的， 因为可以直接通过window对象调用。但有一种情况，你必需要使用 defaultView,  那是在firefox3.6上访问子框架内的样式 (iframe)

使用伪元素

getComputedStyle 还可以为伪元素设置样式 (比如, ::after, ::before, ::marker, ::line-marker—查看 详情 ).

<style>
 h3:after {
   content: ' rocks!';
 }
</style>

<h3>generated content</h3> 

<script>
  var h3       = document.querySelector('h3'), 
      result   = getComputedStyle(h3, ':after').content;

  console.log('the generated content is: ', result); // returns ' rocks!'
</script>

备注

getComputedStyle 的返回值是 resolved values,  通常跟CSS2.1中的computed values是相同的值。 但对于一些旧的属性，比如width, height, padding 它们的值又为 used values。 最初, CSS2.0定义的计算值Computed values 就是属性的最终值。 但是CSS2.1 重新定义了 computed values 为布局前的值， used values布局后的值。 布局前与布局后的区别是， width 或者 height的 百分比可以代表元素的宽度，在布局后，会被像素值替换.

在某些情况下，通过浏览器会特意返回不准确的值。 特别是在避免CSS 浏览历史泄露的安全问题， 比如，浏览者看过某个网站， 它的链接通常会变成蓝色带下划线的链接，通过判断链接的颜色（getComputedSytle(node, null).color) 是否为蓝色，就会泄露用户的浏览历史， 所以浏览器会特意返回不准确的值，保护用户隐私。可以了解更多关于css安全的链接https://blog.mozilla.com/security/2010/03/31/plugging-the-css-history-leak/ 和 https://hacks.mozilla.org/2010/03/privacy-related-changes-coming-to-css-vistited/

在CSS3 的动画中， Firefox 的getComputedSytle会返回原始的属性值， 但在Webkit的浏览器中会返回最终属性值.

在Firefox中， 属性值为auto的会直接返回 used value, 而不是 'auto'.  比如，你在设定了一个元素的css为height:30px; top: auto; bottom:0;  它的父元素的height:100px;  那么top的Computed value 为 ‘auto',  used value 为 '70px' = 100px - 30px;

浏览器兼容

详述

• DOM Level 2 Style: getComputedStyle
• CSS Object Model specification

还可以看看

• window.getDefaultComputedStyle
• resolved value