イナヅマTVログ

JavaScriptでstyleタグをheadに挿入

| 1件のコメント

JavaScriptでstyleタグをheadにオンザフライ(動的)挿入するメモ。

(function(window){
    var document = window.document,
    css = document.createElement('style')
    rule = document.createTextNode('p{display:none}')
    ;
    css.media = 'screen';
    css.type = 'text/css';
    if (css.styleSheet) {
        css.styleSheet.cssText = rule.nodeValue;
    } else {
        css.appendChild(rule);
    };
    document.getElementsByTagName('head')[0].appendChild(css);
}(window));

毎回忘れてしまうのは以下の点。
・CSSの設定をcreateTextNodeで作るところ。
・createElementで生成したstyleインスタンスにcreateTextNodeで作ったstyle定義を追加するところ。
 ・styleSheetオブジェクトがあればcssTextに設定。
 ・無ければappendChildで追加。

1件のコメント

  1. ピンバック: 超個人的メモ, JavaScript関連の投稿リンクをまとめておく « イナヅマtvログ

コメントを残す

必須欄は * がついています


このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください