控制div属性 

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 2 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 3 <html xmlns="http://www.w3.org/1999/xhtml">
 4 <head>
 5 <meta http-equiv="content-type" content="text/html;charset=UTF-8"/>
 6 <meta name="description" content=""/>
 7 <meta name="keywords" content=""/>
 8 <title>控制div属性</title>
 9 <link rel="stylesheet" href="" type="text/css">
10 <script type="text/javascript" src=""></script>
11 <style type="text/css">
12 　　#test{
13 　　　　height:50px;
14 　　　　width:50px;
15 　　　　background:black;
16 　　}
17 </style>
18 <script type='text/javascript'>
19 　　var testStyle = function(elem,attr,value){
20 　　　　elem.style[attr] = value;
21 　　}
22 　　window.onload = function(){
23 　　　　var btn = document.getElementsByTagName("button");
24 　　　　var test = document.getElementById("test");
25 　　　　var attr = ['width','height','color','display','display'];
26 　　　　var value = ['100px','100px','red','none','block'];
27 　　　　for(var i=0;i<btn.length;i++){
28 　　　　　　btn[i].onclick = function(){
29 　　　　　　　　testStyle(test,attr,value);
30 　　　　　　}
31 
32 　　　　}
33 }
34 </script>
35 </head>
36 <body>
37 　　<button>变宽</button>
38 　　<button>变高</button>
39 　　<button>变色</button>
40 　　<button>隐藏</button>
41 　　<button>重置</button>
42 　　<div id="test"></div>
43 </body>
44 </html>

 

posted on 2014-05-16 10:47  遇上  阅读(172)  评论(0)    收藏  举报

导航