继上一篇：获取非行间样式，此处有兼容问题

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了继上一篇：获取非行间样式，此处有兼容问题相关的知识，希望对你有一定的参考价值。

html格式：

  1.   <body>  
  2.     <div id="div1" style="width:200px; height:200px; background:red;">  
  3.     </div>

js代码：

  1. window.onload=function ()  
  2.     {  
  3.         var oDiv=document.getElementById(‘div1‘);  
  4.   
  5.         //alert(oDiv.style.width);     //style只能用来获取行间样式  
  6.         //IE（currentStyle用来获取非行间样式，只兼容IE和高版本的chrome）  
  7.         //alert(oDiv.currentStyle.width);  
  8.   
  9.         //chrome、FF（getComputedStyle有两个参数，第一个就是你要获取哪个物体的样式，第二个参数就是个垃圾，可以写任意东西）  
  10.         //alert(getComputedStyle(oDiv,false).width);  
  11.   
  12.         //alert(oDiv.currentStyle);  
  13.   
  14.         if(oDiv.currentStyle)         //*****如何让所有浏览器都兼容呢？实际上，JS里99.99%的这种兼容问题，都是通过if来解决的  
  15.         {  
  16.             //IE  
  17.             alert(oDiv.currentStyle.width);  
  18.         }  
  19.         else  
  20.         {  
  21.             //chrome、FF  
  22.             alert(getComputedStyle(oDiv,false).width);  
  23.         }  
  24.     };  

把上面的if else封装成一个函数，即公用函数。

  1.  function getStyle(obj,name)  
  2.     {  
  3.         if (obj.currentStyle)  
  4.         {  
  5.             return obj.currentStyle[name];  
  6.         }  
  7.         else  
  8.         {  
  9.             return getComputedStyle(obj,false)[name];  
  10.         }  
  11.     };  
  12.     window.onload=function ()  
  13.     {  
  14.         var oDiv=document.getElementById(‘div1‘);  
  15.   
  16.         alert(getStyle(oDiv,‘width‘));  
  17.     };  

 

以上是关于继上一篇：获取非行间样式，此处有兼容问题的主要内容，如果未能解决你的问题，请参考以下文章

JS中兼容问题的汇总

JS常见知识点

获取费行间样式

经常遇到的js兼容问题大总结

常见的js兼容性问题

工作中经常会碰到的一些js兼容问题