导致控制台错误“无法读取HTMLTableRowElement处未定义的属性'setAttribute'的原因”

Question

我目前正在使用Chrome扩展程序。我试图这样做，以便将鼠标悬停在某个元素上时，背景会变亮，而当您离开它时，它会返回。

if(window.location.pathname == "/page.aspx") {
    tr = document.getElementsByTagName('tr');
    for(i = 0; i < tr.length; i++) {
        tr[i].addEventListener('mouseover', function() {
            tr[i].setAttribute('style', 'background-color: #A9A9A9')
        });
        tr[i].addEventListener('mouseleave', function() {
            tr[i].setAttribute('style', 'background-color: #808080')
        });
    };
};

相反，它什么也不做，当我检查控制台时，出现十二个错误，提示“未捕获的TypeError：无法读取未定义的属性'setAttribute'在HTMLTableRowElement中”，全部用于第5行和第8行。是什么导致这些错误？

EDIT我必须使用setAttribute（）覆盖当前的CSS，这使得无法使用tr [i] .style.backgroundColor

Answer 1

您已经关闭，只是失去了对所需表行的引用。一种选择是使用this关键字，因为TR可以从其事件侦听器函数中引用自身。

tr = document.getElementsByTagName('tr');
for(i = 0; i < tr.length; i++) {
  tr[i].addEventListener('mouseover', function() {
    this.setAttribute('style', 'background-color: #A9A9A9')
  });
  tr[i].addEventListener('mouseleave', function() {
    this.setAttribute('style', 'background-color: #808080')
  });
};

<table>
  <tr><td>Hi</td></tr>
  <tr><td>There</td></tr>
</table>