javascript - 通过javascript的对象属性修改多个元素的样式

Question

(Javascript)我从这里的另一篇文章中窃取了这段非常好的代码。
它改变了style.backgroundColor其中div具有 .onmouseover 的元素。

<div id='idEl' class='classEl'>1</div>
<div id='idEl' class='classEl'>2</div>
<div id='idEl' class='classEl'>3</div>
<div id='idEl' class='classEl'>4</div>
<div id='idEl' class='classEl'>5</div>
<script>
  var div = document.getElementsByTagName("div");
  for(var i = 0; i < div.length; i++) {
  div[i].onmouseover = function() {
     this.style.backgroundColor = "green";
  }
</script>

这可行，但不是用 TagName 来实现。 (这会弄乱我所有其他几十个 div )，我想让它与 id 一起工作(如果可能的话)或 className .
并且不使用 html attributes ，一切都应该通过object properties来完成里面<script> .
如果连强大的也太好了addEventListener可以工作。

Answer 1

只需将 getElementsByTagName 更改为 getElementsByClassName

这是Working fiddle和代码-

<div id='idEl' class='classEl'>1</div>
<div id='idEl' class='classEl'>2</div>
<div id='idEl' class='classEl'>3</div>
<div id='idEl' class='classEl'>4</div>
<div id='idEl' class='classEl'>5</div>
<script>
  var div = document.getElementsByClassName("classEl");
  for(var i = 0; i < div.length; i++) {
  div[i].onmouseover = function() {
     this.style.backgroundColor = "green";
     }
  }

</script>

注意 - 您还缺少我在上面代码中放入的右括号 }，并且您对每个 div 使用相同的 id不正确，因为 id 应该是唯一的。