Day5------------functionCss
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>
