Chinaunix首页 | 论坛 | 博客

chunzhisu的ChinaUnix博客

首页　| 　博文目录　| 　关于我

chunzhisu

  • 博客访问： 75125
  • 博文数量： 73
  • 博客积分： 0
  • 博客等级： 民兵
  • 技术积分： 740
  • 用 户 组： 普通用户
  • 注册时间： 2014-07-04 16:50
文章分类

全部博文（73）

文章存档

2014年（73）

我的朋友
最近访客
推荐博文
JavaScript设置/读取css函数对象的属性

分类： Html/Css

2014-07-10 17:44:40

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


点击(此处)折叠或打开

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
  2. <html xmlns="">
  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>


阅读(564) | 评论(0) | 转发(0) |
0

上一篇：纯CSS实现三角形

下一篇：给文本添加双行删除线

给主人留下些什么吧！~~
关于我们 | 关于IT168 | 联系方式 | 广告合作 | 法律声明 | 免费注册

Copyright 2001-2010 ChinaUnix.net All Rights Reserved 北京皓辰网域网络信息技术有限公司. 版权所有

感谢所有关心和支持过ChinaUnix的朋友们

16024965号-6