JavaScript での色の比較が予期せぬ結果を招くのはなぜですか?

JavaScript の色比較のジレンマ: 別の視点

開発者は、JavaScript での色比較という課題によく遭遇します。等価演算子を使用して色の文字列を一致させるのは簡単そうに見えますが、予期しない結果が生じる可能性があります。次のコードを考えてみましょう:

<br>if (document.getElementById('w1').style.backgroundColor == "#ECECF4") {</p>
<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">alert("Yes");

ログイン後にコピー

}それ以外{

alert("No");

}

要素の色が「#ECECF4」と一致しても、コードは「いいえ」と警告します。これは、ブラウザのレンダリングと色の変換によって色の表現に微妙な違いが生じる可能性があるためです。

色の比較に基づくビジネス ロジックの回避

この問題を解決するために、専門家は使用しないことをアドバイスしています。 JavaScript のビジネス ロジックの一部としての色の比較。代わりに、JavaScript で状態を維持し、クラス名を変更して外観を更新します。このアプローチでは、JavaScript は状態管理に重点を置き、CSS はスタイルを処理します。

実装例

jQuery を使用した次のコードを考えてみましょう。

$(".list").on("クリック", "リ", function() {</p>
<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">$(this).toggleClass('active');

ログイン後にコピー