currentStyle&getComputedStyle

标签：style   blog   color   使用   width   io   

currentStyle：获取计算后的样式，也叫当前样式、最终样式。

优点：可以获取元素的最终样式，包括浏览器的默认值，而不像style只能获取行间样式，所以更常用到。
注意：不能获取复合样式如background属性值，只能获取单一样式如background-color等。

alert (oAbc.currentStyle);
非常遗憾的是，这个好使的东西也不能被各大浏览器完美地支持。准确地说，在我测试的浏览器中，IE8和Opera 11弹出了“object CSSStyleDeclaration”；FF 12、chrome 14、safari 5则弹出“undefined”。

虽然currentStyle无法适用于所有浏览器，但是可以根据以上测试的结果来区分开支持、不支持的浏览器，然后再找到兼容的写法。

1 var oAbc = document.getElementById("abc");
2 if(oAbc.currentStyle) {
3         //IE、Opera
4         alert("我支持currentStyle");
5 } else {
6         //FF、chrome、safari
7         alert("我不支持currentStyle");
8 }

其实在FF浏览器中我们可以使用getComputedStyle(obj,false)来达到与IE下currentStyle相同的效果。

getComputedStyle(obj,false)：在FF新版本中只需要第一个参数，即操作对象，第二个参数写“false”也是大家通用的写法，目的是为了兼容老版本的火狐浏览器。

兼容写法：

 1 var oAbc = document.getElementById("abc");
 2 if(oAbc.currentStyle) {
 3         //IE、Opera
 4         //alert("我支持currentStyle");
 5         alert(oAbc.currentStyle.width);
 6 } else {
 7         //FF、chrome、safari
 8         //alert("我不支持currentStyle");
 9         alert(getComputedStyle(oAbc,false).width);
10 }

一个空白页面中body的id=”abc”，测试以上代码，IE和Opera弹出“auto”，其它三款浏览器则弹出“***px”。虽然结果不同，但是可以发现chrome和safari也都和火狐一样，顺利地读取到了属性值。不支持currentStyle的三款浏览器(FF、chrome、safari)，都是支持getComputedStyle的。

结果表明：对浏览器是否支持currentStyle的判断 + getComputedStyle，就可以做到兼容各主流浏览器的效果。而且兼容写法并不复杂，你掌握了吗？^_^

支持currentStyle：IE、Opera
支持getComputedStyle：FireFox、Chrome、Safari

注意最后的弹出内容，currentStyle返回浏览器的默认值”auto”，而getComputedStyle则返回具体的值”**px”。这应该是两者的一个小差异，有兴趣的童鞋可以一起交流研究下。

currentStyle&getComputedStyle,布布扣,bubuko.com

currentStyle&getComputedStyle

标签：style   blog   color   使用   width   io   

原文地址：http://www.cnblogs.com/reeoo/p/3844666.html