標籤:style blog http io ar color 使用 sp java
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>
Day5------------functionCss