• JavaScript设置/读取css函数对象的属性,二个参数, 如果第二个参数是对象, 批量设置属性。 
      第一个按钮点击事件,两个参数, 第二个参数为字符串, 读取属性值,两个参数, 第二个参数为对象, 属性批量设置。


点击(此处)折叠或打开

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>css函数——设置/读取对象的属性</title>
  6. <style>
  7. div{width:400px;height:200px;background:#fef4eb;border:1px solid #f60;margin:0 auto;}
  8. input{border:0;color:#fff;cursor:pointer;font-weight:700;background:#f60;padding:2px 4px;margin:10px 0 0 10px;}
  9. </style>
  10. <script type="text/javascript">
  11. function css(obj, attr, value)
  12. {
  13.     switch (arguments.length)
  14.     {
  15.         case 2:
  16.             if(typeof arguments[1] == "object")
  17.             {    //二个参数, 如果第二个参数是对象, 批量设置属性
  18.                 for (var i in attr)obj.style[i] = attr[i]
  19.             }
  20.             else
  21.             {    //二个参数, 如果第二个参数是字符串, 读取属性值
  22.                 return obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle(obj, null)[attr]
  23.             }
  24.             break;
  25.         case 3:
  26.             //三个参数, 单一设置属性
  27.             obj.style[attr] = value;
  28.             break;
  29.         default:
  30.             alert("参数错误!")
  31.     }
  32. }
  33. window.onload = function ()
  34. {
  35.     var oBox = document.getElementById("box");
  36.     var aInput = oBox.getElementsByTagName("input");
  37.     
  38.     //第一个按钮点击事件
  39.     aInput[0].onclick = function ()
  40.     {
  41.         //两个参数, 第二个参数为字符串, 读取属性值
  42.         alert("width: " + css(oBox, "width") + "\nheight: " + css(oBox, "height") + "\nbackground-color: " + css(oBox, "backgroundColor"))
  43.     };
  44.     //第二个按钮点击事
  45.     aInput[1].onclick = function ()
  46.     {
  47.         //两个参数, 第二个参数为对象, 属性批量设置
  48.         css(oBox, {width: "330px", height: "100px", borderColor: "#0084ff", backgroundColor: "#eff8ff"});
  49.         //三个参数, 属性单一设置
  50.         for (i = 0; i < aInput.length; i++) css(aInput[i], "backgroundColor", "#0084ff")
  51.     }
  52.     //第三个按钮点击事件
  53.     aInput[2].onclick = function ()
  54.     {
  55.         //两个参数, 第二个参数为对象, 属性批量设置
  56.         css(oBox, {width: "400px", height: "200px", borderColor: "#f60", backgroundColor: "#fef4eb"});
  57.         //三个参数, 属性单一设置
  58.         for (i = 0; i < aInput.length; i++) css(aInput[i], "backgroundColor", "#f60")    
  59.     }
  60. };
  61. </script>
  62. </head>
  63. <body>
  64. <div id="box">
  65.     <input type="button" value="Get Style" /><input type="button" value="Set Style" /><input type="button" value="Default Style" />
  66. </div>
  67. </body>
  68. </html>


10-20 22:10