使用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属性，它是样式属性。

注意：如果你指的是指定td元素，使用cells[i]代替，因为在这种特殊情况下this关键字将不指实际迭代的元素，但在窗口对象。

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"; 
}