JavaScriptのコーディングで、CSSを外部ファイル化するとファイルが複数になって管理の手間が増えます。 要するに面倒くさいのでスクリプト中に要素のstyleプロパティを設定してしのぐ事が多いです。 そうすると、なんだかんだでスタイル指定だけでコード量が膨れ上がってしまい、見通しも悪くなります。

そこで、外部ファイルを使わずにCSSをその書式のまま記述できないかを調べました。 こういうのは定石なのかもしれませんが、IEではdocument.createStyleSheets()を使い、その他では普通にstyle要素を作成してtextContentに流し込めば良いだけでした。 こんな簡単ならもっと前からやっとけばよかった。

そして、この方式でスタイルを適用した場合に大きなメリットがあります。生成したstyle要素（IEではdocument.createStyleSheets()で生成されるオブジェクトのowningElementがそれで、link要素となります。）を削除することで、適用されていたスタイルもすっかり元に戻すことができるということです。bookmarkletで自分が管理していないページ上で何かをする場合、きちんとそういう後始末をするのが行儀のよいプログラムです。

(function(csstext) {
    if (document.createStyleSheet) { //IEの場合
        var sheet = document.createStyleSheet();
        sheet.cssText = csstext;
        sheet.owningElement.id = 'outercss';
        return sheet.owningElement;
    } else { //その他
       var sheet = document.body.appendChild(document.createElement("style"));
       sheet.type="text/css";
       sheet.textContent = csstext;
       sheet.id = 'outercss';
       return sheet;
    }
})('*{color:red !important;}');

(function() {
    var sheet = document.getElementById('outercss');
    if (sheet) sheet.parentNode.removeChild(sheet);
})();

• JavaScriptコードスニペット