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

版权声明:本博主的博客只对在进行安全评估和渗透测试的学习者们提供基础知识学习和个人经验分享及互动平台,不得用于任何形式的网络攻击等违法犯罪行为,请阅读者谨记。文章编写不易,转载请注明出处 https://blog.csdn.net/Litbai_zhang/article/details/82768886

使用环境

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

效果

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

代码

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

效果

IE浏览器
IE
谷歌浏览器
谷歌
火狐浏览器
火狐

猜你喜欢

转载自blog.csdn.net/Litbai_zhang/article/details/82768886
今日推荐