如何在javascript中将样式应用于类?

时间:2011-12-31 12:36:35

标签: javascript css class html height

我身体里有多个需要相同风格的div:

<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]而第二个[1]则将高度应用于两个div。我无法删除方括号,因为那时javascript根本不起作用。我还尝试使用getElementsByTagName获取名称但没有成功。

如何让这个javascript对所有带有“box”类的div应用相同的高度?或者还有另一种方法可以做我想做的事情吗?

2 个答案:

答案 0 :(得分:4)

尝试以下方法:

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/

答案 1 :(得分:1)

一种简单的方法是document.write html中的样式, 在定义链接元素之后,正在读取页面。

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

<body...