javascript 函数笔记

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样式计算值都为空。

推荐阅读更多精彩内容