JavaScript学习之路 (实例十)——如何使用js兼容不同的浏览器及非行间样式的提取

使用环境

在很多时候,对象的样式并不只在行间,那么我们普通的例如div.style[name]=value这种样式提取方式就会失效。这时候我们就需要用到例如div.currentStyle[name]这种方式来获取样式,但是问题又随之而来,该方式仅支持IE浏览器,像火狐、谷歌等浏览器并不支持。火狐等浏览器支持的方式是getComputedStyle这种方式(获取计算后的样式,聪明的你一定懂了什么意思了吧。实在不理解度娘等你)。
那么怎么让写出来的JS代码同时兼容这些浏览器呢?

效果

代码运行无误,成功提取到非行间样式,且同时兼容多个浏览器。

代码

JavaScript学习之路 (实例十)——如何使用js兼容不同的浏览器及非行间样式的提取
PS_1:因为浏览器的获取方式不同,我先通过alert的方式确定了currentStyle和getComputedStyle的类型(我提前确定好的,不在这个实例中),确定了类型之后通过if判断来实现兼容不同的浏览器问题。为了方便使用,可以写完存起来方便下次再用,积少成多,制作自己的js库。
PS_2:上个实例中提到了复合样式,你可以把本实例中的alert(getStyle(odiv,‘width’))这一项的width改成backgrund试一下。如果发现有问题,那么改成background-color再试一下,看看有什么不同。

效果

IE浏览器
JavaScript学习之路 (实例十)——如何使用js兼容不同的浏览器及非行间样式的提取
谷歌浏览器
JavaScript学习之路 (实例十)——如何使用js兼容不同的浏览器及非行间样式的提取
火狐浏览器
JavaScript学习之路 (实例十)——如何使用js兼容不同的浏览器及非行间样式的提取