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

Question

(Javascript) 我在这里从另一个 post 那里偷了这个非常好的代码。
它将那些 div 元素的 style.backgroundColor 更改为 .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 的情况下，所有操作都应通过 <script>.
中的 object properties 完成如果强大的 addEventListener 也能工作就好了。

Answer 1

要通过 css class 获取元素，您可以使用 getElementsByClassName 函数

document.getElementsByClassName("classEl");

请注意，在您的情况下最好使用 'id'，因为 html 不允许在同一文档上使用多个相同的 ID。

要获取元素（不是元素），您可以：

document.getElementById("my_unique_id");

您可以看到工作示例 - here

Answer 2

只需将 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 应该是唯一的。

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

modifying the style of multiple elements via javascript's object properties

javascript

getelementbyid

getelementsbytagname

getelementsbyclassname

object-properties