使用getAttribute更改单元格的背景色

Question

我试图使用getAttribute遍历具有蓝色背景的单元格来遍历表的单元格，然后将其更改为黄色背景。 我知道CSS可以轻松完成此任务，但是我想了解如何使用JavaScript。

这是我的代码：

<table>
  <tr>
    <td>
      Cell 1
    </td>
    <td>
      Cell 2
    </td>
  </tr>
  <tr>
    <td>
      Cell 3
    </td>
    <td style="background-color:blue">
      Cell 4
    </td>
</tr>
</table>



var cells = document.getElementsByTagName('td');

for(i=0; i < cells.length; i++) {
  if(cells[i].getAttribute('backgroundColor') == true) {
    this.style.backgroundColor = "yellow";
  }
}

控制台日志未返回任何错误。 有什么想法吗？

谢谢！

Answer 1

请注意， background属性不是DOM属性，而是style属性。

注意 ：如果您引用指定的td元素，请改用cells[i] ，因为在这种特殊情况下， this关键字将不引用实际迭代的元素，而是引用window对象。

 var cells = document.getElementsByTagName('td'); for (i = 0; i < cells.length; i++) { if (cells[i].style.background == 'blue') { cells[i].style.background = "yellow"; } } 

 <table> <tr> <td> Cell 1 </td> <td> Cell 2 </td> </tr> <tr> <td> Cell 3 </td> <td style="background:blue"> Cell 4 </td> </tr> </table> 

如果您想引用DOM属性，则可以应用以下代码：

if (cells[i].getAttribute('style') == 'background:blue') {
   cells[i].style.background = "yellow";
}