Question

所以目前我有这段代码：

function bgchanger(color){
  document.getElementById("headwrapper").style.backgroundColor = color;
  document.getElementById("footerwrapper").style.backgroundColor = color;
}

伴随着这个HTML：

<div id="blue" style="cursor: pointer" onClick="bgchanger('blue')"></div>

适用于在点击时更改div的颜色。然而，它显然效率低下。我不应该通过Element Id来识别两个div，而应该通过共享类来调用它们。但我有点不清楚我将如何安排document.getElementsByClassName，因为它显然与ID方法的排列方式不同。

Answer 1

我认为你的意思是代码效率低，因为在运行时getElementById()会很快。但正如你暗示的那样，如果它可以按类来做这类事情而不是拥有一堆硬编码的id，那么你的JS会更整洁。事实上，如果你的JS不再需要使用id，你也可以从你的html中省略它们（除非它们在样式表中使用）。

所以，getElementsByClassName()返回一个列表，所以只需循环遍历它：

function bgchanger(color){
    var list = document.getElementsByClassName("someClass");
    for (var i = 0; i < list.length; i++) {
        list[i].style.backgroundColor = color;
    }
}

演示：http://jsfiddle.net/KNxBV/

更新cookie怪物的建议：

您可以使用querySelectorAll()代替getElementsByClassName() - 它的浏览器支持稍微好一点：

    var list = document.querySelectorAll(".someClass");
    // other code as above. Note the . ---^

更新了演示：演示：http://jsfiddle.net/KNxBV/1/

我如何使用getclassbyelemenentnames？

1 个答案: