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