「なぜ style.backgroundColor は効果がないのですか?」

Question

<p>セルをクリックして色を変更してみてください。 </p> <p>セルは通常灰色ですが、初めてクリックすると赤色に変わります。赤いセルをクリックすると、再び灰色に変わります。 </p> <p><br /></p> <pre class="brush:js;toolbar:false;">function changeColor(cell) { var red = '#FE2E2E'; var grey = '#E6E6E6'; if (cell.style.backgroundColor == grey) { cell.style.backgroundColor = 赤; } それ以外 { if (cell.style.backgroundColor == red) { cell.style.backgroundColor = グレー; } }; };</pre> <pre class="brush:css;toolbar:false;">#table tr td { 幅: 20ピクセル; 高さ: 50ピクセル; カーソル: ポインタ; 背景色: #E6E6E6; 境界線: 1 ピクセルの黒一色。 }</pre> <pre class="brush:html;toolbar:false;"><table class="table table-border" id="table"> <みんな> <tr> <td onclick="changeColor(this)"></td> <td onclick="changeColor(this)"></td> <td onclick="changeColor(this)"></td> <td onclick="changeColor(this)"></td> <td onclick="changeColor(this)"></td> </tr> </tbody> </table></pre> <p><br /></p> <p><code>.style.bgColor</code>、<code>rgb</code>、<code>if (cell.style.backgroundColor ===</code> ,しかし、これらも機能しませんでした。セルの背景色の値は、<em>.backgroundColor</em>:<strong>''</strong> で渡されるか、<em>.bgColor< で渡されます。 ; /em>：未定義。

Answer 1

コードの最初の実行時に style 属性が設定されていないため、コードは機能しません。 backgroundColor: style は要素のインライン スタイル属性を表します。 、要素の先頭にはインライン スタイルがありません。要素の背景が red または gray であるかどうかを確認すると、インライン スタイル (style.backgroundColor は実際には空の文字列)。

いくつかの選択肢があります:

• インラインに設定されているかどうかに関係なく、要素の background-color を確認するには、getComputedStyle を使用します。
• 要素が設定されているかどうかに関係なく、要素の background-color が設定されるデフォルトの状況を提供します。 (赤色の場合は灰色に切り替え、そうでない場合は赤色に設定します。)

どちらのアプローチでも、ソリューションにどの程度の柔軟性が必要かに応じて、必要なことを実現できます。決定はあなたにお任せします。

Answer 2

style.backgroundColor から取得した値は、設定時と同じ形式で返されるわけではなく、ブラウザーが期待する形式でレンダリングされます。

最小限の変更を加えたアプローチは、要素にフラグを保存することです (コメントを参照):

リーリー リーリー リーリー