首页 > 代码库 > 关于获取、设置css样式封装的函数入门版
关于获取、设置css样式封装的函数入门版
1 <html> 2 <head> 3 <meta charset="UTF-8"> 4 <title>CSS样式的获取和设置:简单版</title> 5 <style type="text/css"> 6 #div { 7 width: 100px; 8 height: 100px; 9 background: pink; 10 } 11 </style> 12 <script type="text/javascript"> 13 //根据id获取元素 14 function $(id) { 15 return document.getElementById(id); 16 } 17 //获取样式 18 function getStyle(obj, attr) { 19 //哪个对象obj 20 //哪个属性attr 21 //兼容IE 22 if (obj.currentStyle) { 23 return obj.currentStyle[attr]; 24 } 25 else { 26 //兼容谷歌 火狐 27 return getComputedStyle(obj, false)[attr]; 28 } 29 } 30 31 //获取或者设置CSS的属性 32 function css(obj, attr, value) { 33 //获取CSS的数值 34 if (arguments.length == 2) { 35 return getStyle(obj, attr); 36 } 37 //设置CSS的数值 38 if (arguments.length == 3) { 39 obj.style[attr] = value; 40 } 41 } 42 //调用CSS()方法，进行测试 43 window.onload = function() { 44 css($("div"), "width", “200px”); 45 } 46 // 最后可以把这写在一起，一个函数就搞定47 function css(obj,attr,value){48 var getStyle = obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle(obj,false)[attr];49 if(arguments.length === 2){50 return getStyle;51 52 }else if(arguments.length === 3){53 obj.style[attr] = value;54 }55 }56 </script> 57 </head> 58 <body> 59 <div id="div"></div> 60 </body>61 </html>
关于获取、设置css样式封装的函数入门版
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。