「なぜ style.backgroundColor は効果がないのですか?」
P粉969253139
2023-08-24 16:47:18
<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>：未定義。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
コードの最初の実行時に
style属性が設定されていないため、コードは機能しません。backgroundColor:styleは要素のインライン スタイル属性を表します。 、要素の先頭にはインライン スタイルがありません。要素の背景がredまたはgrayであるかどうかを確認すると、インライン スタイル (style.backgroundColorは実際には空の文字列)。いくつかの選択肢があります:
background-colorを確認するには、getComputedStyleを使用します。background-colorが設定されるデフォルトの状況を提供します。 (赤色の場合は灰色に切り替え、そうでない場合は赤色に設定します。)どちらのアプローチでも、ソリューションにどの程度の柔軟性が必要かに応じて、必要なことを実現できます。決定はあなたにお任せします。
style.backgroundColor
最小限の変更を加えたアプローチは、要素にフラグを保存することです (コメントを参照):から取得した値は、設定時と同じ形式で返されるわけではなく、ブラウザーが期待する形式でレンダリングされます。