jQueryのcssで得られる色情報はブラウザによって違う

Pocket

jQueryでstyleで指定したフォントの色に関する情報は次のようにして得られます。

HTML

<div id="mydiv" style="color:blue">test</div>

jQuery

c=$("#mydiv").css("color");

これで変数cに色情報が文字列で代入されます。
とても簡単なのですが、ブラウザによって違う挙動をします。

IEの場合

HTMLで「style="color:blue"」とすると「blue」が得られます。
またHTMLで「style="color:rgb(0,0,255)"」とすると「rgb(0,0,255)」となります。
「rgb(0, 0, 255)」のように半角スペースを入れても「rgb(0,0,255)」のように半角スペースは省かれます。
「style="color:#0000ff"」とすると「#0000ff」となります。

Firefox、Chromeの場合

まず、HTMLで「style="color:rgb(0,0,255)"」とすると「rgb(0, 0, 255)」が得られます。
そして奇妙なのは次です。
HTMLで「style="color:blue"」とすると、やはり「rgb(0, 0, 255)」となります。
入力した文字列と違う文字列で出力されるのです。これは分かりにくいです。
また細かいですが「rgb(0, 0, 255)」のようにカンマの後に半角スペースが入ります。IEはスペースなしです。

HTML IE Firefox、Chrome
blue blue rgb(0, 0, 255)
rgb(0,0,255) rgb(0,0,255) rgb(0, 0, 255)

[ 2011年9月2日 | カテゴリー: デジタル | タグ: , , ]

« | »

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

送信してください。


タグ

カテゴリー

最近の投稿

最近のコメント

固定ページ

アーカイブ

stabucky

写真

メタ情報