13

我不知道如何在 JavaScript 中使用多个 ID。单个 ID 和 没有问题getElementById，但是一旦我将 ID 更改为 class 并尝试使用getElementsByClassName该函数就会停止工作。我已经阅读了大约 100 篇关于该主题的帖子；仍然没有找到答案，所以我希望这里有人知道如何getElementsByClassName工作。

这是我用于测试的一些简单代码：

function change(){
    document.getElementById('box_one').style.backgroundColor = "blue";
}

function change_boxes(){
    document.getElementsByClassName ('boxes').style.backgroundColor = "green";
}

   
<input name="" type="button" onClick="change(document.getElementById('box_one')); change_boxes(document.getElementsByClassName('boxes'))" value="Click" />   

<div id="box_one"></div>
<div class="boxes" ></div>
<div class="boxes" ></div>
4

3 回答 3

29

getElementsByClassName()返回一个*。您正在尝试直接对结果进行操作；您需要遍历结果。nodeList HTMLCollection

function change_boxes() {
    var boxes = document.getElementsByClassName('boxes'),
        i = boxes.length;

    while(i--) {
        boxes[i].style.backgroundColor = "green";
    }
}

*更新以反映界面的变化

于 2013-01-03T16:13:39.157 回答
4

getElementsByClassName返回一组具有所有给定类名的元素

var elements = document.getElementsByClassName('boxes');
for(var i=0, l=elements.length; i<l; i++){
 elements[i].style.backgroundColor = "green";
}
于 2013-01-03T16:16:35.247 回答
-1

getElementsByClassName 返回一个元素列表，因此您需要遍历它们并逐个设置每个项目的样式。它在 IE 中的支持也有限，所以最好使用 jQuery：

$(".boxes").css("backgroundColor", "green");
于 2013-01-03T16:17:33.167 回答