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属性，而是样式属性。

注意：如果您引用指定的td元素，请改用cells[i]，因为此特定情况下的this关键字不< / strong>引用实际迭代的元素，但引用 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"; }

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

1 个答案: