2017-04-10 45 views
0

背景が青のセルに対してgetAttributeを使用してテーブルのセルをループし、黄色の背景に変更しようとしています。 CSSを使って簡単にこの作業を行うことができますが、JavaScriptを使用して理解したいと思います。getAttributeを使用してセルの背景色を変更する

<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

背景色は、タグの属性ではありませんが。 nullを返します。そのため、エラーは発生しません。 – TypedSource

+0

属性を照会する必要はありません。セルが現在青い背景を持っているかどうかだけを確認する必要があります。 if(セル[i] .style.backgroundColor === "blue")... ' –

答えて

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

'getAttribute'はここでは冗長です。 'cells {i} .style.backgroundColor ==" blue "'を使用してください。 –

+1

@ScottMarcusこれは意味がありませんが、**私はそれを追加しました**もしOPが本当に 'style'を使用したいのであれば** attrubute ...(: –

関連する問題