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キーワードがは、実際には反復要素に、しかしウィンドウオブジェクトを参照していますので。あなたはDOM属性を参照したい場合に

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>

、あなたは次のコードに適用できます。

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