A-A+

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

2016年06月21日 web前端设计 评论 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.com  
  42. };  
  43. </script>  
  44. </body>  
  45. </html>  
标签:

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

  1. 最好的代写essay服务

    感谢楼主的分享,赞赞。

  2. 成航先森

    又是研究JS了,厉害

给我留言

Copyright © 夏日博客 保留所有权利.   Theme  Ality 冀ICP备15026943号-2

用户登录