15、关于元素CSS函数的封装,可用于获取和设置元素的CSS样式

秒速五厘米 2022-07-24 11:15 203阅读 0赞

1、关于元素CSS函数的封装,可用于获取和设置元素的CSS样式

  1. <head>
  2.         <meta charset="UTF-8">
  3.         <title>CSS样式的获取和设置</title>
  4.         <style type="text/css">
  5.             #div1 {
  6.                 width: 100px;
  7.                 height: 100px;
  8.                 background: red;
  9.             }
  10.         </style>
  11.         <script type="text/javascript">
  12.             //根据id获取元素
  13.             function $(id) {
  14.                 return document.getElementById(id);
  15.             }
  16.             //获取样式
  17.             function getStyle(obj, attr) {
  18.                 //哪个对象
  19.                 //哪个属性
  20.                 //IE
  21.                 if (obj.currentStyle) {
  22.                     return obj.currentStyle[attr];
  23.                 }
  24.                 //谷歌 火狐
  25.                 else {
  26.                     return getComputedStyle(obj, false)[attr];
  27.                 }
  28.             }
  29.             //获取或者设置CSS的属性
  30.             //哪个对象
  31.             //哪个属性
  32.             //设置属性，新的数值
  33.             function css(obj, attr, value) {
  34.                 //获取CSS的数值
  35.                 if (arguments.length == 2) {
  36.                     return getStyle(obj, attr);
  37.                 }
  38.                 //设置CSS的数值
  39.                 if (arguments.length == 3) {
  40.                     obj.style[attr] = value + "px";
  41.                 }
  42.             }
  43.             //调用CSS()方法，进行测试
  44.             window.onload = function() {
  45.                 //alert(css($("div1"), "width"));
  46.                 css($("div1"), "width", 200);
  47.             }
  48.         </script>
  49.     </head>
  51.     <body>
  52.         <div id="div1"></div>
  53.     </body>

2、获取元素的CSS样式

  1. //调用CSS()方法，进行测试
  2.             window.onload = function() {
  3.                 alert(css($("div1"), "width"));
  4.             }

3、设置元素的CSS样式

  1. window.onload = function() {
  2.                 css($("div1"), "width", 200);
  3.             }

发表评论

表情：
评论列表 （有 0 条评论，203人围观）

还没有评论，来说两句吧...

相关阅读