如何将样式应用于JavaScript中的类？

我在我的身体多个div这就需要相同的风格：如何将样式应用于JavaScript中的类？

<div class="box"></div>

我有一个计算的浏览器窗口视口高度的高度的JavaScript。我想将这个高度应用于我所有的“盒子”分类div。

<script type="text/javascript"> 
var box = document.getElementsByClassName('box')[0]; 
var height = (window.innerHeight) ? window.innerHeight: document.documentElement.clientHeight; 
box.style.height=(height)+'px'; 
</script>

这是有效的，但只有一个div，它不会使第二个“box”div与前一个高度相同。如果我将方括号中的数字从0更改为1，则会将高度应用于第二个div。另外，如果我制作第二个JavaScript副本，以便第一个脚本具有[0]，第二个脚本将高度应用于两个div。我无法删除方括号，因为那样JavaScript根本不起作用。我也尝试用getElementsByTagName获取名称，但没有成功。

我该如何让这个JavaScript应用相同的高度与“盒”类的所有div？还是有另一种方法来做我想做的事情？

来源

2011-12-31 hlotvonen

0是'getElementsByClassName'返回的数组的第一个元素的索引。 – 2011-12-31 12:42:43

尝试以下操作：

var elems = document.getElementsByClassName('box'), 
    size = elems.length; 

for (var i = 0; i < size; i++) { 

var box = elems[i]; 
var height = (window.innerHeight) ? window.innerHeight: document.documentElement.clientHeight; 
box.style.height=(height)+'px'; 
}

演示：http://jsfiddle.net/JRdHD/

来源

2011-12-31 12:42:49 Sotiris

只是一个疯狂的想法，但尝试并将'document.getElementsByClassName'存储在变量中并遍历它。所以，你知道，在每次循环迭代中，你不必走遍整个DOM树， – Zirak 2011-12-31 12:46:12

我认为消除重复的DOM引用是可取的，不是吗？我想一个变量来存储来自getElementsByClassName的节点列表，然后遍历它。每一点帮助。 – thescientist 2011-12-31 12:47:40

是的！完善。有效！非常感谢你！ – hlotvonen 2011-12-31 12:56:51

一个简单的方法是使用document.write风格的HTML，而页面被读取，后链接件定义。

<script> 
document.writeln('<style>div.box{height:'+ 
document.documentElement.clientHeight+'px;}'+ 
'<\/style>'); 
</script> 
</head> 

<body...

来源

2011-12-31 16:40:49 kennebec

如何将样式应用于JavaScript中的类？

回答

相关问题