首页 > 代码库 > Day5------------functionCss

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

2024-08-04 04:29:39   216人阅读

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="http://www.mamicode.com/submit">38 </body>39 </html>

 

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


联系
我们