背景色を取得したら何が返されてくるのか?
「<エレメント>.style.backgroundColor」で要素の背景色を取得した場合、ブラウザによって値の形式が異なるようなのでちょっと調べてみた。
ブラウザ | 型 | 形式 |
---|---|---|
Firefox3.0.5 | string | 常に「rgb(255,255,255)」形式で返される |
IE6,7 | string | スタイルでの設定値が返されるが、「rdb(100%,100%,100%)」形式のみ「rgb(255,255,255)」で返される |
Google Chrome1.0 | string | 常に「rgb(255,255,255)」形式で返される |
Safari3.1.2 | string | 常に「rgb(255,255,255)」形式で返される |
Opera9.26 | string | 常に「#FFFFFF」形式で返される |
値の型は全て文字列だけど、形式はまちまち。コンバートしてからでないと使えない感じですね。
確認用のコード
確認用のサンプルはこちら。ソースは以下です。
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script type="text/javascript"> function main() { var out = document.getElementById("out"); var ids = ["a", "b", "c", "d"]; for ( var i=0,n=ids.length;i<n;i++ ) { var color = document.getElementById(ids[i]).style.backgroundColor; out.innerHTML += ids[i] + " : " + color + " : " + typeof color + "<br/>"; } } </script> <style> div.box { width: 20px; height: 20px; margin: 10px; float: left; } </style> </head> <body onload="main();"> <div id="a" style="background-color:#DD33AA;" class="box"></div> <div id="b" style="background-color:#AD3;" class="box"></div> <div id="c" style="background-color:rgb(51, 170, 221);" class="box"></div> <div id="d" style="background-color:rgb(70%, 70%, 70%);" class="box"></div> <div id="out" style="clear:both;"></div> </body> </html>