最新消息:文章中包含代码时,请遵守代码高亮规范!

JavaScript提取行间样式,currentStye与getComputedStyle方法【原创】

JavaScript 陈, 梦娟 639浏览 0评论

<span style=“font-size:18px;”><div id=“div1”></div></span>

  1. #div1{
  2.             width100px;
  3.             height:100px;
  4.             backgroundred;
  5.         }

效果如下图:

通常我们用js获取或修改行间样式会用这样一句代码

但是,问题来了,这只能修改“行间样式”,对于外部链接样式则是行不通的,那么我们怎么来处理这个问题呢

  1. window.onload=function(){
  2.             var odiv=document.getElementById(‘div1’);
  3.             alert(odiv.currentStyle.width);
  4.         };

很明显,通过currentStyle我们获取到了div的样式,但是这是只能在IE下行得通,在Chrome和火狐下什么反应都没有,还会报错,说width没有定义

那好,我们在换一种方法,就是getComputedStyle,它有两个参数,下面我们通过实例来看一下,我们js部分换一种写法

  1. window.onload=function(){
  2.             var odiv=document.getElementById(‘div1’);
  3.             // alert(odiv.currentStyle.width);
  4.             alert(getComputedStyle(odiv,null).width);
  5.         };

话不多说,直接看效果

Chrome下面的效果:

大于IE9浏览器效果,正常显示

但是在IE低版本浏览器下可就没那么幸运了,比如IE8,7,6..

结果很明显了,要么IE可以,Chrome不可以,要么Chrome可以,IE不可以

这可怎么办呢,牵扯到浏览器兼容问题,解决办法其实很简单,不要忘记我们还有if else语句呢

  1. window.onload=function(){
  2.             var odiv=document.getElementById(‘div1’);
  3.             if(odiv.currentStyle){
  4.                 alert(odiv.currentStyle.width);
  5.             }
  6.             else{
  7.                 alert(getComputedStyle(odiv,null).width);
  8.             }
  9.         };

这样兼容问题就解决了,并且在IE8以下都能正常运行,现在看来万事大吉了,好像要结束的样子

但是问题又来了,如果我们要提取很多样式,难道要写很多个if else,怎么可能呢,

这里就用到了封装,我们把它封装起来,想要用的时候调用就可以,非常方便

  1. function getStyle(obj,name){
  2.             if(obj.currentStyle){
  3.                 return obj.currentStyle[name];
  4.             }else{
  5.                 return getComputedStyle(obj,null)[name];
  6.             }
  7.         };
  8.         window.onload=function(){
  9.             var odiv=document.getElementById(‘div1’);
  10.             alert(getStyle(odiv,‘width’));  //调用
  11.         };

效果同样,兼容浏览器,也方便以后重复利用

转载时请注明出处及相应链接,本文永久地址:https://blog.yayuanzi.com/23021.html


pay_weixin
pay_weixin
微信打赏
pay_weixin
支付宝打赏
感谢您对作者blue的打赏,我们会更加努力!    如果您想成为作者,请点我

发表我的评论
取消评论

表情