window.getComputedStyle

说明:

getComputedStyle()返回元素的所有css属性的计算值

语法：

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

参数说明:

element:目标元素的DOM对象

pseudoElt:指明要匹配的伪元素,对于普通元素必须指定为null(或省略)

返回值style为CSSStyleDeclaration对象.

---

getComputedStyle与dom.style的区别

getComputedStyle获取的是所有css属性的计算值

dom.style返回的是行内的css属性计算值

getComputedStyle获取的值是只读的并且可被用于检测元素的样式(包括style属性和外部样式).而elt.style可被用于设置指定元素的样式.

兼容IE

万恶的IE不支持此方法，它有自己的一个实现方式，那就是currentStyle，不同于全局方法getComputedStyle，它是作为DOM元素属性存在的，如：obj.currentStyle.paddingLeft，在IE中就获取到对象的左内边距了，兼容性的写法如下： 复制代码 代码如下: return window.getComputedStyle ? window.getComputedStyle(obj,null).paddingLeft : obj.currentStyle.paddingLeft; 这样，就能在IE及FF中返回对象的当前样式信息了。

demo

html

 <div id="demo" style="color:blue;font-size:20px">1111</div>

css

 #demo{
            width:200px;
            height:200px;
            background:red;
        }

javascript

  var demo1 = document.getElementById("demo");
  var txt = window.getComputedStyle(demo1);
  var txt1 = demo1.style;
  console.log(txt,txt1);

这里color和font-size是行内样式 getComputedStyle是可以得到所有样式计算值，而dom.style是只可以得到行内的样式计算值。

输出如下

QQ截图20170622143439.png

展开可以看到 两个方法返回的都是CSSStyleDeclaration对象，该对象具有dom的css样式计算值。

1.getComputedStyle方法不仅可以得到行内样式计算值，也可以得到id样式计算值
2.dom.style只能得到行内样式计算值，id样式计算值都为空。