Question

此代码在console.log中没有错误，但它没有显示类名。

document.getElementsByClassName("abc").onmouseover =  function(){mouseOver()};
 function mouseOver(){
 abc.innerHTML = "Class name " + abc.className;
 }

Answer 1

.getElementsByClassName()例程返回列表元素。当您尝试执行此操作时，无法通过列表直接向所有元素添加事件处理程序。你必须明确迭代：

var abc = document.getElementsByClassName("abc");
for (var i = 0; i < abc.length; ++i) {
  // ...
}

出于您的目的，使用Array.prototype.forEach方法执行此操作会更有意义，尽管看起来很奇怪：

var abc = document.getElementsByClassName("abc");
[].forEach.call(abc, function(element) {
  element.onmouseover = function() {
    element.innerHTML = "Class name: " + element.className;
  };
});

使用.forEach确保事件处理程序使用本地变量（element）正确地工作，每次调用循环回调。

Answer 2

document.getElementsByClassName返回具有所有给定类名的所有子元素的类数组对象。因此，您必须将onmousever事件与每个子对象绑定。

https://developer.mozilla.org/en/docs/Web/API/Document/getElementsByClassName

你可以这样试试。

＆＃13;

var elements = document.getElementsByClassName("abc")

for (var i=0; i < elements.length; i++) {
  elements[i].onmouseover =  function(){mouseOver(i)};
}

function mouseOver(index){

   document.getElementsByClassName("abc")[index -1].innerHTML = "Class name " + document.getElementsByClassName("abc")[index -1].className;
}

＆＃13;

<div class="abc">
  mouse over me
</div>

＆＃13;

根据评论中提供的html编辑答案

<html> <head>   </head> <body> <h1 class="abc">Hello everyone</div>
<script type="text/javascript"> var elements = document.getElementsByClassName("abc"); for (var i=0; i < elements.length; i++) { elements[i].onmouseover = function(){mouseOver(i)}; } function mouseOver(index){ document.getElementsByClassName("abc")[index -1].innerHTML = "Class name " + document.getElementsByClassName("abc")[index -1].className; } </script> </body> </html>

Javascript .getElementsByClassName不起作用

2 个答案: