2010年2月5日金曜日

JQueryで色を取得する際の注意

JQueryで、Background-colorを取得して、色によって動作を変える、というスクリプトを組むとき、返ってくる値は、RGB形式になっている。
これは、仕様とのことで、#CCCCCCのような値で返すことは特別なスクリプトを利用しない限り無理のようだ。

しかし、返ってくるRGB形式ですら、InternetExplorerとGoogleChrome、Firefoxでは若干違う。

InternetExplorer8の場合は、RGBの値は、rgb(xxx,xxx,xxx)と、数値と数値の間にスペースを入れずにかかなければならない。例えば背景色が白を判別する場合は、以下のようにする。

if( $("#id").css("background-color") == "rgb(255,255,255)"){ ~ }

しかし、GoogleChromeとFirefoxの場合は、rgb(xxx, xxx, xxx)と、2番目と3番目の数値の前にスペースを1つ入れなければならない。

if( $("#id").css("background-color") == "rgb(255, 255, 255)"){ ~ }

どちらか一方では、どちらかのブラウザが値を判別できず動作しなくなる。
だから、上記のような条件を書く場合は、

if( $("#id").css("background-color") == "rgb(255,255,255)" || $("#id").css("background-color") == "rgb(255, 255, 255)")){ ~ }

と書かなければならない。

追記

Operaの場合、色の値はRGBの16進数で取得するため、上記に追加して、

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

と書く。これで、IE、FireFox、Safari、GoogleChrome、Operaで動作する。

0 件のコメント:

コメントを投稿