如何将样式应用于javascript中的类？答案

【问题标题】：How to apply style to a class in javascript?如何将样式应用于javascript中的类？
【发布时间】：2012-01-31 01:36:34
【问题描述】：

我的身体中有多个 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，它不会使第二个“盒子”div 的高度与前一个相同。如果我将方括号中的数字从 0 更改为 1，它会将高度应用于第二个 div。此外，如果我制作了 javascript 的第二个副本，以便第一个脚本具有 [0] 和第二个 [1]，它会将高度应用于两个 div。我无法删除方括号，因为那时 javascript 根本不起作用。我也尝试使用 getElementsByTagName 获取名称，但没有成功。

如何让这个 javascript 对所有具有“box”类的 div 应用相同的高度？还是有其他方法可以做我尝试做的事情？

【问题讨论】：

0 是getElementsByClassName 返回的数组的第一个元素的索引。

标签： javascript css class html height

【解决方案1】：

尝试以下方法：

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/

【讨论】：

只是一个疯狂的想法，但尝试将document.getElementsByClassName 存储在一个变量中并对其进行迭代。所以，你知道，你不必在每次循环迭代时遍历整个 DOM 树，
我认为消除重复的 DOM 引用是可取的，不是吗？我认为一个变量可以存储来自 getElementsByClassName 的节点列表，然后循环遍历它。每一点都有帮助。
除了不是所有浏览器都支持getElementsByClassName，所以需要进行功能测试，另选。
如果您非常想要向后兼容，您可以循环整个文档一次并将匹配项存储在数组中。如果浏览器是现代的，您可以只分支并返回 getElementsByClassName。（哦，这篇文章已经有将近 9 年的历史了。这就解释了向后兼容的必要性。）

【解决方案2】：

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

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

<body...

【讨论】：