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和CODE -

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

Answer 2

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

document.getElementsByClassName("classEl");

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

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

document.getElementById("my_unique_id");

您可以看到工作示例 - here

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

2 个答案: