夏日博客

A-A+

js获取非行间样式/定义样式

2016年06月21日 前端设计 评论 2 条 阅读 7 views 次

今天又学到了 js 获取非行间样式，如果直接获取行间样式的话是很简单的，按照正常的流量来走就可以了，但如果要获取非行间样式的话，比如CSS里面的样式，哪就会出现获取不到的问题，只能使用 currentStyle 来进行获取了，但使用 currentStyle 在非IE下面又不能使用了，出现了兼容性的问题，使用 currentStyle 在火狐下出现 undefined 的错误，所以说这个 JS 的兼容好难解决的说，看视频教程，老师讲了一大堆，自己实在也不想练习了，直接把兼容性的 js 获取非行间样式的代码给贴出来吧，仅供夏日博客参考使用好了。

  1. <!--DOCTYPE html-->  
  2. <html>  
  3. <head>  
  4. <meta charset="utf-8" />  
  5. <style>  
  6. *{ text-align:center;}  
  7. input{ margin-top:30px; padding:10px 20px;}  
  8. #div1{ width:500px; height:300px; background:red; margin:10px auto;}  
  9. </style>  
  10. </head>  
  11. <body>  
  12. <input type="button" value="style" id="btn" />  
  13. <div id="div1"></div>  
  14.    
  15. <script>  
  16. //获取非行间css样式  
  17. function getStyle(obj,attr){    //获取非行间样式，obj是对象，attr是值  
  18.     if(obj.currentStyle){   //针对ie获取非行间样式  
  19.         return obj.currentStyle[attr];  
  20.     }else{  
  21.         return getComputedStyle(obj,false)[attr];   //针对非ie  
  22.     };  
  23. };  
  24. //为对象写入/获取css样式  
  25. function css(obj,attr,value){   //对象，样式，值。传2个参数的时候为获取样式，3个是设置样式  
  26.     if(arguments.length == 2){  //arguments参数数组，当参数数组长度为2时表示获取css样式  
  27.         return getStyle(obj,attr);  //返回对象的非行间样式用上面的getStyle函数  
  28.     }else{  
  29.         if(arguments.length == 3){  //当传三个参数的时候为设置对象的某个值  
  30.             obj.style[attr] = value;  
  31.         };  
  32.     };  
  33. };  
  34. window.onload = function(){  
  35.     var oDiv = document.getElementById("div1");  
  36.     var oBtn = document.getElementById("btn");  
  37.     oBtn.onclick = function(){  
  38.         alert(getStyle(oDiv,"height"));  
  39.         css(oDiv,"background","green");  
  40.         alert(css(oDiv,"width"));  
  41.     };//xiariboke.net  
  42. };  
  43. </script>  
  44. </body>  
  45. </html>  
标签：

2 条留言  访客：2 条  博主：0 条

  1. 最好的代写essay服务 2016年06月22日 下午 7:41  -199楼  回复

    感谢楼主的分享，赞赞。

  2. 成航先森 2016年06月21日 下午 1:17  -198楼  回复

    又是研究JS了，厉害

给我留言