如何在JavaScript函数中使用getElementsByClassName？

Question

我不知道如何在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>

- jan199674

---

正如其名称所示，该函数返回一个元素列表：https://developer.mozilla.org/zh-CN/docs/DOM/document.getElementsByClassName。 - Felix Kling

可能是重复的问题：在JavaScript中这个getElementsByClassName调用有什么问题？ 和 getElementsByClassName能改变样式吗？ 还有很多其他类似的问题，可以在右侧栏找到。 - Felix Kling

更多重复内容：https://dev59.com/7HA75IYBdhLWcg3wVneI，http://stackoverflow.com/q/12377734/218196，https://dev59.com/tGYr5IYBdhLWcg3wcJ10。 - Felix Kling

在提出新问题之前，请先使用搜索功能。 - Felix Kling

Answer 1

getElementsByClassName() 返回一个 nodeList HTMLCollection*。你正在尝试直接操作结果，需要遍历结果。

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

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

* 已更新以反映界面更改

- Evan Davis

---

谢谢 - 运行良好。不确定我是否真正理解为什么 - 我将把您的解决方案复制到我正在处理的更大项目中，希望我也能在那里使其工作。 - jan199674

@Kenneth：getElementsByClassName 返回所有具有该类名的元素，即 多个 元素。要更改这些元素的属性，您必须遍历元素列表。 - Felix Kling

嗯，我又遇到了一个无法解决的问题。我在同一页上使用相同样式的20个按钮。这些按钮是div-class，并通过Mathletics的工作代码进行onClick选择。 实际上，每个按钮由2个按钮组成，当单击时通过z-index更改位置并为每个按钮呈现新图片。 - jan199674

完美，正是我们所需要的。如果在使用getElementsByClassName的循环中更改className，需要向后处理（就像上面的例子一样，i--）。谢谢！ - anonymous-one

现在它实际上返回一个HTMLCollection的实例，而不是NodeList。 - Maksim Vi.

Answer 2

getElementsByClassName 返回拥有所有给定类名的元素集合

var elements = document.getElementsByClassName('boxes');
for(var i=0, l=elements.length; i<l; i++){
 elements[i].style.backgroundColor = "green";
}

- Scipion

Answer 3

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

$(".boxes").css("backgroundColor", "green");

- JLRishe