サイトマップ

JavaScriptコードスニペット:外部ファイルを使わずにCSSを適用する

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

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

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

[CSSを適用する]←このリンクをクリックすると文字が赤くなります。
(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;}');
[CSSを取り除く]←このリンクを押すと元に戻ります。
(function() {
    var sheet = document.getElementById('outercss');
    if (sheet) sheet.parentNode.removeChild(sheet);
})();

関連コンテンツ

 
research/1309962754.txt · 最終更新: 2011/07/07 21:09 by Kazuyuki Matsuda
特に明示されていない限り、本サイトの内容は次のライセンスに従います:Copyright(C) 2011 Shorindo, Inc. All Rights Reserved
Powered by PHP Valid XHTML 1.0 Valid CSS Driven by DokuWiki