currentstyle和getComputedStyle兼容问题

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



长处：能够获取元素的终于样式，包含浏览器的默认值，而不像style仅仅能获取行间样式，所以更经常使用到。

注意：不能获取复合样式如background属性值，仅仅能获取单一样式如background-color等。



alert (oAbc.currentStyle);

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



尽管currentStyle无法适用于全部浏览器，可是能够依据以上測试的结果来区分开支持、不支持的浏览器，然后再找到兼容的写法。



var oAbc = document.getElementById("abc");

if(oAbc.currentStyle) {

        //IE、Opera

        alert("我支持currentStyle");

} else {

        //FF、chrome、safari

        alert("我不支持currentStyle");

}

事实上在FF浏览器中我们能够使用getComputedStyle(obj,false)来达到与IE下currentStyle同样的效果。



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



兼容写法：



var oAbc = document.getElementById("abc");

if(oAbc.currentStyle) {

        //IE、Opera

        //alert("我支持currentStyle");

        alert(oAbc.currentStyle.width);

} else {

        //FF、chrome、safari

        //alert("我不支持currentStyle");

        alert(getComputedStyle(oAbc,false).width);

}

一个空白页面中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”。