読者です 読者をやめる 読者になる 読者になる

主要ブラウザで動くCSSを追加する関数

JavaScript CSS

GM_addStyleの実装と最適化 - 0xFFに関連して、「IEでGM_addStyleみたいな関数ってどう書けばいいんだろ」とつぶやいたら、fubさんにcreateStyleSheetってのを教えてもらいました。で、調べてみたらcreateStyleSheetとcssTextで割と簡単に書けるみたいなので、クロスブラウザな関数にまとめてみました。

addCSS.js

function addCSS (css){
	if (document.createStyleSheet) { // for IE
		var sheet = document.createStyleSheet();
		sheet.cssText = css;
		return sheet;
	} else {
		var sheet = document.createElement('style');
		sheet.type = 'text/css';
		var _root = document.getElementsByTagName('head')[0] || document.documentElement;
		sheet.textContent = css;
		return _root.appendChild(sheet).sheet;
	}
}

CSSStyleSheetオブジェクトを返すので、簡単にdisabledの切り替えが出来たりします。
addCSSサンプル

参考にしたもの


# まあ、各ブラウザにCSS追加するなら、ちゃんとCSSファイルを用意したほうが作業的にも処理的にも効率的ですが。