Question

js赋值<style></style>中的样式

<style type="text/css">
#nav{width:100%; height:auto; float:left; padding:6px;}
#nav li{height:150px; float:left; margin:7px; border-radius:10px; background-color:#F36;}
.small{width:46.875%;}
.big{width:95.9375%;}
</style>

<div id="nav">
<li class="big"></li>
<li class="big"></li>
<li class="small"></li>
<li class="small" style="float:right"></li>
<li class="big"></li>
</div>

js如何给#nav li赋值。要根据浏览器实时宽度，按照一个比值实时给#nav li的height和margin赋值。
请回答的人，贴上来的代码都加上清楚的注释

Answer 1

　　参考如下：
　　<div id="div1">
　　<p>.....</p>
　　</div>
　　因为是动态数据，所以#div1的高度是auto，无法获取到具体值。
　　var div1=document.getElementById("div1");
　　alert(div1.style.height); //没有值
　　建议从css上改进。
　　比如给中间的div设置css {height:500px;overflow:auto;}这样就能固定高度，多出的内容用滚动条显示。
　　或者让尾部div相对中间的div定位。

Answer 2

试试用JS直接向样式中插入一条新规则,利用CSS的可叠加特性,你不必去修改已有的样式定义,只要新定义你需要的样式即可,如:
document.styleSheets[0].addRule("#nav li","height:100px;margin:2px;");

追问

那我怎么加变量。。。

追答

正常的字符串拼接就行了,假设你两个变量height和margin,则可用如下代码:
document.styleSheets[0].addRule("#nav li","height:"+height+";margin:"+margin+;");
非IE浏览器可用
document.styleSheets[0].insertRule("#nav li{height:"+height+";margin:"+margin+;}",0);

追问

为什么没有效果，这是手机平板网页，代码兼容以w3c标准为主，古老的ie版本可以不用太顾虑。

追答

你的字符串连接比较怪异,我在笔记本的FireFox上调式了一下(木有平板),通过,你试试看吧.

<style type="text/css">
#nav{width:100%; height:auto; float:left; padding:6px;}
#nav li{height:150px; float:left; margin:7px; border-radius:10px; background-color:#F36;}
.small{width:46.875%;}
.big{width:95.9375%;}
</style>
<div id="nav">
<li class="big"></li>
<li class="big"></li>
<li class="small"></li>
<li class="small" style="float:right"></li>
<li class="big"></li>
</div>
<script type="text/javascript">
window.onresize = window.onload = function(){
   var w,h;
   if(!!(window.attachEvent && !window.opera)){
      w = document.documentElement.clientWidth;
      h = document.documentElement.clientHeight;
   }else{
      w = window.innerWidth;
      h = window.innerHeight;
   }
   var index=document.styleSheets[0].cssRules.length;
   alert('ready?');
   document.styleSheets[0].insertRule("#nav li { height:"+w*0.1875+"px;margin:"+w*0.009375+"px;}",index);
}
</script>

Answer 3

$('#div').attr('dispaly','none');