Javascript getElementsByClassName，用于在事件发生时更改元素的样式

我想用

 onmouseover="document.getElementsByClassName().style.background='color'"

将鼠标悬停在另一个页面元素上时，将具有给定类名的所有div的颜色更改为另一种颜色

这里有一个JSFIDLE——如果有人能就我的错误给出一些有用的指示，那就太好了，我确信我确实遗漏了一些非常明显的东西。它与document.getElementById一起工作，但这只改变了第一个div的颜色，而不是所有div的颜色

---

谢谢：）

正如函数名所示，返回的是一个集合，而不仅仅是一个对象。因此，您需要在它们之间循环并对其应用颜色

document.getElementsByClassName()
                   ^_______

另外，您的id部分无效。Id不能有空格，也不应再次出现在被以下内容违反的页面上：

<th id="colorswitcher A" onmouseover="document.getElementsByClassName('a').style.background='red'">a</th>
<th id="colorswitcher B" onmouseover="document.getElementsByClassName('a').style.background='blue'">b</th>

a
B

您可以这样做（您可以查找什么是处理程序并尝试自己使用它。），不要对处理程序使用内联属性

window.onload=function(){
    var aColl = document.getElementsByClassName('a'); //Cache the collection here, so that even a new element added with the same class later we can avoid querying this again by using the cached collection.
    var bColl = document.getElementsByClassName('b');

    document.getElementById('A').addEventListener('mouseover', function(){
        changeColor(aColl, 'red');
    });

    document.getElementById('B').addEventListener('mouseover', function(){
        changeColor(bColl, 'blue');
    });
}
function changeColor(coll, color){

    for(var i=0, len=coll.length; i<len; i++)
    {
        coll[i].style["background-color"] = color;
    }
}

window.onload=function（）{
var aColl=document.getElementsByClassName（'a'）；//将集合缓存在此处，这样即使是以后添加了同一类的新元素，也可以通过使用缓存的集合避免再次查询该集合。
var bColl=document.getElementsByClassName（'b'）；
document.getElementById（'A'）。addEventListener（'mouseover'，function（）{
变色（aColl，“红色”）；
});
document.getElementById（'B'）。addEventListener（'mouseover'，function（）{
变色（b颜色，蓝色）；
});
}
函数changeColor（coll，color）{
对于（var i=0，len=coll.length；这篇文章似乎已经写好了我的问候语，不让我在中编辑它：OHi，谢谢你的回答！我有点傻，我该如何循环使用它们？*编辑：固定ID。谢谢。重要的是要提到
getElementsByClassName
返回一个实时集合，这就是为什么你可以“缓存”
aColl
和
bColl
位于函数顶部（否则，您必须在事件处理程序中重新查询）。无论哪种方式，答案都很好。@lan是的。添加要点很好。