Day5------------functionCss

浏览数：38 / 时间：2015年06月09日

style只能获取行间样式，如果需要获取所需要元素的当前属性值，

IE：

　　可以使用object. currentStyle.width；

FF:

　　可以使用getComputedStyle（object,false）.width；

创建了函数Css来控制样式提供了UI交互，并完成了参数匹配

 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>functionCss</title>
 6 </head>
 7 <style type="text/css">
 8     div{width: 700px;height: 400px;background: gray;font-size: 20px;cursor: pointer;}
 9 </style>
10 <script type="text/javascript">
11     window.onload=function(){
12         oDiv=document.getElementsByTagName(‘div‘)[0];
13         oBtn=document.getElementsByTagName(‘input‘);
14         oDiv.innerHTML="If you don‘t init the value,you get the current value.<br/>or else,you change it.<br/>re:<br/>textbox1:width,height,backgroundColor,fontSize<br/>textbox2:**px,pink,red,#CCC";
15         function Css(Obj,Attr,Value){
16             if(oDiv.currentStyle) {
17                 if(arguments.length==2)    alert(Obj.currentStyle[Attr]);
18                 else Obj.style[Attr]=Value;                
19             }
20             else if(getComputedStyle) {
21                 if(arguments.length==2)    alert(getComputedStyle(Obj,false)[Attr]);
22                 else Obj.style[Attr]=Value;                
23             }
24         }
25         oBtn[2].onclick=function(){
26             if(oBtn[0].value){
27                 if(oBtn[1].value) Css(oDiv,oBtn[0].value,oBtn[1].value);
28                 else Css(oDiv,oBtn[0].value);
29             }            
30         }
31     }
32 </script>
33 <body>
34     <div></div>
35     <input type="text"  placeholder="the attribute to get" />
36     <input type="text" placeholder="the value to change" />
37     <input type="button" value="submit">
38 </body>
39 </html>