正如函数名所暗示的,getElementsByClassName返回一个集合而不仅仅是一个对象。所以你需要遍历它们并为其应用颜色。
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>
您可以这样做(您可以查找什么是处理程序并尝试自己使用它。),不要对处理程序使用内联属性。
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;
}
}
小提琴
如果您真的想为一些实际工作做这件事,那么不要更改样式属性,而是定义类并在 mouseover、mouseout 事件上添加/删除类,以便您获得 css 级联属性的强大功能。