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是只可以得到行内的样式计算值。
输出如下
展开可以看到 两个方法返回的都是CSSStyleDeclaration对象,该对象具有dom的css样式计算值。
1.getComputedStyle方法不仅可以得到行内样式计算值,也可以得到id样式计算值
2.dom.style只能得到行内样式计算值,id样式计算值都为空。