如何在javascript函数中使用getElementsByClassName？

我不知道如何在JavaScript中使用多个ID。 没有单身份证和getElementById的问题，但只要我改变ID类和尝试使用getElementsByClassName函数停止工作。 我读过关于这个话题的100个post; 还没有find答案，所以我希望这里的人知道如何使getElementsByClassName工作。

下面是我用于testing的一些简单的代码：

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> 

Answer 1

getElementsByClassName()返回一个nodeList HTMLCollection *。 你试图直接对结果进行操作; 你需要遍历结果。

 function change_boxes() { var boxes = document.getElementsByClassName('boxes'), i = boxes.length; while(i--) { boxes[i].style.backgroundColor = "green"; } } 

---

* 更新，以反映界面的变化

Answer 2

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

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

Answer 3

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

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