想定する読者
javascriptのコードを書いていて、ある要素のbackgroundの値を分岐判定に使おうと思った人。(例えばすごろくゲームを作っていて、赤色マス、青色マスの判定を画面の色に頼っていたとか)
追記-- コメントよりご指摘頂いてますが、だいぶ穴のある記事になっています。ごめんなさい。
きっかけ
私は背景の色を#を使って指定してしまう癖があるのですが、backgroundの色に応じて処理を変えたいときにif(node.style.background="#~~~")という感じでかいても絶対にtrueの処理に入ってくれなっかのです。これの解決にはだいぶ頭を悩ませてしまったので、備忘録として記録しておきます。
結論からいうとこれにはブラウザがbackgroundの値をどのような形で保持しているか、が原因でした。ブラウザが保存する形式に合わせないと==でも===でもfalseになってしまします。以下の実験では、プロパティの設定時ではいずれも有効と判断される記入例を並べ、if文にかけた時の判定を比べてみました。
実験コード
<body>
<div id="box" style="width:300px;height: 300px;background: #f55;"></div>
<script type=text/javascript >
window.onload=function(){
const box=document.getElementById("box");
console.log(box.style.background);
console.log(box.style.background=="#f55");
console.log(box.style.background=="rgb(255,85,85)");
console.log(box.style.background=="rgb(255, 85, 85)");
console.log(box.style.background=="rgb(255, 85, 85) none repeat scroll 0% 0%");
//以下省略
#実験結果
chromeの場合
rgb(255, 85, 85) ⇐ブラウザが保存している色情報の形式
false ⇐16進数表記
false ⇐rgb表記（スペース無し）
true ⇐rgb表記
false ⇐色以外のrepeat設定などを含めた文
firefoxの場合
rgb(255, 85, 85) none repeat scroll 0% 0% ⇐ブラウザが保存している色情報の形式
false ⇐16進数表記
false ⇐rgb表記（スペース無し）
false ⇐rgb表記
true ⇐色以外のrepeat設定などを含めた文
#ではじめる16進数表記での色指定(2行目)はif文では意図した処理になりません。rgbで指定するにも","の後にしっかりスペースを開けて合わせないといけないようですね(3,4行目参考)。また私の環境では２つしか比べられませんでしたが、ブラウザによってbackgroundの保存形式が違うではないですか。
訂正 （この場合、backgroundColorでプロパティを保存してけば、両ブラウザでは保存形式は同じになり、3個目の照合でtrueになります。）