jQueryで色名を取得する際の注意

Home>Information>jQueryで色名を取得する際の注意

この情報はお役に立ちましたか？よろしければ皆様にもお知らせください。

  このエントリーをはてなブックマークに追加 mixiチェック  

[ JavaScript ] [ jQuery ]

jQueryで、背景色（background-color）を取得して、その背景色によって動作を分岐させる、というようなスクリプトを書くとき、以下のようにして背景色を取得します。

$("#id").css("background-color")

このとき返ってくる値は、各ブラウザによって異なります。

ブラウザによる背景色の書式
ブラウザ名 書式 ex.白の場合
IE,GoogleChrome,Firefox,Safari RGB形式 rgb(255,255,255)
Opera 16進数 #ffffff

クロスブラウザ仕様にするには

rgb(255,255,255)もしくは、#ffffffのどちらか一方だけを判定させると、それに対応していないブラウザは反応しません。
では、以下のように書けばいいかというと、今度はIEとそれ以外のブラウザでの若干の仕様の相違のために動きません。

if ( $("#id").css("background-color") == "rgb(255,255,255)" || $("#id").css("background-color") == "#ffffff") ){ 実行文 }

上記の方法では、GoogleChrome、Firefox、Safari、Operaでは動作するけれど、IEでは動きません。

IEとそれ以外のブラウザでのRGB形式の書式の違い

IEの場合、戻り値は、GoogleChromeやFirefoxなどと同じRGB形式ですが、書式が若干違うため、上記では認識されません。IEの場合の戻り値は、以下のようになります。

rgb(255, 255, 255)

RedとGreenとBlueの値を区切るカンマの後に半角のスペースが入っています。

これを加味したクロスブラウザ設計をするには、この3通りの条件を提示しなければなりません。

if ( $("#id").css("background-color") == "rgb(255,255,255)" || $("#id").css("background-color") == "rgb(255, 255, 255)" || $("#id").css("background-color") == "#ffffff") ){ 実行文 }

関連リンク

よく読まれている記事

UpDate:2010-2-17