如何在 javascript 函数中使用 getElementsByClassName？ [复制]答案

【问题标题】：How to use getElementsByClassName in javascript-function? [duplicate]如何在 javascript 函数中使用 getElementsByClassName？ [复制]
【发布时间】：2012-12-18 00:54:21
【问题描述】：

我不知道如何在 JavaScript 中使用多个 ID。单个 ID 和 getElementById 没有问题，但是一旦我将 ID 更改为类并尝试使用 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>

【问题讨论】：

顾名思义，该函数返回一个列表元素：developer.mozilla.org/en-US/docs/DOM/….
What is wrong with this getElementsByClassName call in Javascript? 和 Can getElementsByClassName change style? 的可能重复项以及更多内容，可在右侧栏中找到。
更多重复：stackoverflow.com/q/3349332/218196、stackoverflow.com/q/12377734/218196、stackoverflow.com/q/13667533/218196。
请在提出新问题之前使用搜索。

标签： javascript dom getelementbyid getelementsbyclassname

【解决方案1】：

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

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

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

* 更新以反映界面的变化

【讨论】：

谢谢-工作正常。不确定我是否真的理解为什么 - 将您的解决方案复制到我正在从事的更大的项目中，希望我也可以让它在那里工作
@Kenneth: getElementsByClassName 返回具有该类名称的所有元素，即多个元素。要更改这些元素的属性，您必须遍历元素列表。
嗯 - 还有一个我无法弄清楚的问题。我在同一页面上有 20 个使用相同样式的按钮。按钮是 div 类，由 onClick 使用 Mathletics 的工作代码选择。每个按钮实际上是由 2 个按钮组成的，当点击时它们会根据 z-index 改变位置，并为每个按钮呈现一张新图片。
完美，正是我们所需要的。需要记住的一点是，如果在使用 getElementsByClassName 的循环内更改类名，则需要向后工作（如上面的示例，i--）。谢谢！
它现在实际上返回了一个 HTMLCollection 的实例，而不是 NodeList

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

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

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

【讨论】：