CSS getElementsByClassName 在事件发生时改变元素的样式
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18927025/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
getElementsByClassName to change the style of elements when event occurs
提问by PSL
I'm trying to use
我正在尝试使用
onmouseover="document.getElementsByClassName().style.background='color'"
to change the color of all divs with a given classname to another color when hovering over another page element.
将鼠标悬停在另一个页面元素上时，将具有给定类名的所有 div 的颜色更改为另一种颜色。
Here is a jsfiddle -if anyone could give a few helpful pointers as to where I'm going wrong that would be great, I'm sure it's something really obvious that I'm missing. It worked with document.getElementById, but that only changed the color of the first div, not all of them.
这是一个 jsfiddle - 如果有人可以就我出错的地方提供一些有用的指示，那会很棒，我相信这是我遗漏的非常明显的东西。它与 document.getElementById 一起工作，但这只是改变了第一个 div 的颜色，而不是全部。
Thanks :)
谢谢 ：）
回答by PSL
As the function name suggests getElementsByClassNamereturns a collection not just one object. So you need to loop through them and apply the color to it.
正如函数名称所暗示的那样getElementsByClassName返回一个集合而不仅仅是一个对象。所以你需要遍历它们并将颜色应用到它。
document.getElementsByClassName()
^_______
Plus your id part is invalid. Id cannot have spaces and also it shouldn't appear again on the page which is violated by:
另外您的 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>
You can do it this way (You can look up what is a handler and try play yourself with it.), don't use inline attributes for handlers.
您可以这样做（您可以查找什么是处理程序并尝试使用它。），不要对处理程序使用内联属性。
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;
}
}
If you are really trying to do it for some real work, then don't change the style attribute, instead define classes and add/remove classes on mouseover, mouseout events so that you get the power of css' cascading property.
如果你真的想为一些实际工作做这件事，那么不要改变样式属性，而是定义类并在鼠标悬停、鼠标移出事件上添加/删除类，以便您获得 css 级联属性的强大功能。
