首页 > 代码库 > Day5------------functionCss
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="http://www.mamicode.com/submit">38 </body>39 </html>
Day5------------functionCss
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。