getElementsByClassName在事件发生时更改元素的样式

本文介绍了getElementsByClassName在事件发生时更改元素的样式的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

我想尝试使用

onmouseover =document.getElementsByClassName（）。style.background ='color'当悬停在另一个页面元素上时，

可将具有给定类别名称的所有div的颜色更改为另一种颜色。

这里是一个jsfiddle - 任何人都可以给一些有用的指针，我会错了，这将是巨大的，我敢肯定，我丢了。它与document.getElementById一起使用，但只改变了第一个div的颜色，而不是所有的。

谢谢：）

解决方案

由于函数名称建议 getElementsByClassName 不仅返回一个对象的集合。所以你需要循环遍历它们并应用颜色。

document.getElementsByClassName（） ^ _______

此外，您的ID部分无效。 ID不能有空格，也不应该再次出现在违反的页面上：

< th id = colorswitcher Aonmouseover =document.getElementsByClassName（'a'）。style.background ='red'> a< / th> < th id =colorswitcher Bonmouseover =document.getElementsByClassName（'a'）。style.background ='blue'> b< / th>

你可以这样做（你可以查找什么是处理程序， 。），不要使用处理程序的内联属性。

window.onload = function（）{ var aColl = document.getElementsByClassName（'a'）; //缓存集合在这里，所以即使一个新的元素添加了相同的类后，我们可以避免通过使用缓存集合再次查询这个。 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; } }

小提琴

如果你真的试图为某些真正的工作，那么不要改变style属性，而是在mouseover，mouseout事件上定义类和添加/删除类，以便获得css'cascading属性的力量。

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.

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.

Thanks :)

解决方案

As the function name suggests getElementsByClassName returns a collection not just one object. So you need to loop through them and apply the color to it.

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:

<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; } }

Fiddle

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.