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

时间:2017-04-10 21:57:01

标签: javascript dom

我正在尝试使用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";
  }
}

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

谢谢!

1 个答案:

答案 0 :(得分:2)

请注意,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";
}