修改css Rule完成网页布局

通过监听网页大小，保证一行有三个div

<!DOCTYPE html> <head> <meta http-equiv="Content-Type" content="text/html;charset=gb2312"> <title> </title> <style title="dyCssDiv"> #main div{float:left;border:1px solid red;} </style> <script> window.onload=window.onresize=function(){ //alert(document.documentElement.offsetHeight); //chrome,会打出8，如果(加上html float),会得到自适应的宽度。。当然下面获得scrollWidth也会出现错误 //alert(document.documentElement.clientHeight); //得到宽度，发现不管怎样。。clientHeight总是浏览器的可视高度 //alert(document.body.offsetHeight); // 0 chrome ff （如果body：float的话body会恢复正常） //alert(document.body.clientHeight); //0 chrome ff (function(){ var styles=document.styleSheets; var style; for(var i=0;i<styles.length;i++){ if(styles[i].title=='dyCssDiv'){ style=styles[i];break; } } var rules=style.cssRules; var cWidth=document.documentElement.scrollWidth; if(rules){ for(i=0;i<rules.length;i++){ if(rules[i].selectorText=='#main div'){ //style.deleteRule(i);删除一个rule rules[i].style.width=(cWidth/3-10)+'px'; break; } } } //style.insertRule('#main div{width:'+(cWidth/2-10)+'px;}',0);或者使用删除添加一个rule //alert(document.defaultView.getComputedStyle(document.getElementById('d'),null).getPropertyValue('width')); })(); } </script> </head> <body> <div id="main"> <div id="d"> <a href="#">aaaa</a> </div> <div " > <a href="###">bbbb</a> </div> <div > <a href="#">aaaa</a> </div> <div > <a href="###">bbbb</a> </div> </div> </body> </html>

posted on 2012-03-15 15:23 G.N&K 阅读(281) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

sking7

导航

公告

修改css Rule完成网页布局