とりさんのソフト屋さん

JavaScriptでスタイルシートの背景色を取得する方法

スタイルシートを適用させたDOM要素の背景色を取得する方法です。JQueryなどを使えば簡単に取得できるのですが、素のJavaScriptでクロスブラウザで行うのは結構大変。。。

悩んだのでメモ

以下の関数でDOM要素を渡すと背景色を連想配列にR,G,Bで返してくれます。

function getBgColor(cell)
{
	var m;
	var ret={};
	var clr;
	/* 背景色を取得 */
	if(navigator.userAgent.indexOf("MSIE")!=-1){
		clr = cell.currentStyle.backgroundColor;
	} else {
		clr = document.defaultView.getComputedStyle( cell, null).getPropertyValue( "background-color" );
	}
	/* 取得した色を色要素ごとに切り分ける */
	if(navigator.userAgent.indexOf("MSIE") != -1 || navigator.userAgent.indexOf("Opera") != -1 ) {
		m=clr.match(/^#(\w{2})(\w{2})(\w{2})$/);
	} else {
		m=clr.match(/^rgb\(\s*(\d+),\s*(\d+),\s*(\d+)\)$/);
	}
	if (!m) {
		/* 切り分け出来なかった場合、白に */
		ret.r = 255;
		ret.g = 255;
		ret.b = 255;
	} else {
		if(navigator.userAgent.indexOf("MSIE") != -1 || navigator.userAgent.indexOf("Opera") != -1) {
			/* IEとOperaは16進数の文字列 */
			ret.r = parseInt(m[1],16);
			ret.g = parseInt(m[2],16);
			ret.b = parseInt(m[3],16);
		} else {
			/* 他は10進 */
			ret.r = parseInt(m[1]);
			ret.g = parseInt(m[2]);
			ret.b = parseInt(m[3]);
		}
	}
	return ret;
}

以下のように、DOM要素を引数で渡して使用します。例ではテーブルのセルを渡しています。

<script type="text/javascript">
var rgb = getBgColor(document.getElementById("table_cell_no_id"));
alert(rgb.r+' '+rgb.g+' '+rgb.b);
</script>

IE6・7、Firefox3、Safari、Opera、Chromeの最新版で試しています。

コード解説

簡単に解説すると、 IEはcurrentStyle.backgroundColorで取得し、それ以外はdocument.defaultView.getComputedStyleでCSS適用後のスタイルを取得。

得られた背景色はブラウザでまったく違うので注意

IEとOperaは背景色が指定されている場合、#aaaaaaといったお馴染みの形式で返してくれますが、他は「rgb(100,100,100)」のような形式で返してくれます。

最後に

cssもJavaScriptもクロスブラウザにするの面倒ですね。。。

この記事はふっくんのブログっぽいサイトからの移行記事です。テーブルソートだけを移行するのも。。。なので一緒に移行しました。