BinaryDevelop
  1. ホーム
  2. javascript

JavaScriptで<head>にCSSを追加する？

2023-10-02 04:29:01

質問

javascriptでjavascriptファイル内の文字列からcssを文書のheadに追加する方法はありますか？

例えば、ライトボックススクリプトがあるウェブページがあるとします。このスクリプトは機能するためにcssファイルを必要とします。

この css ファイルを <link> で追加すると、jsを有効にしていない人でもcssファイルをダウンロードできるようになります。

スクリプトでcssファイルを動的にロードできることは知っていますが、それは2つのhttpリクエストがあることを意味し、ファイルにcssがほとんどない場合、私はこれが非効率的であると思います。

そこで私は考えました。css ファイルにある css をスクリプトに入れ、スクリプトが css を解析して head に追加する、あるいはさらに良いことに、スクリプトが css を直接 <head> に直接追加することもできます。

ですが、ネットで調べてもそのようなことは書かれていないので、jsでheadにcssを追加することは可能なのでしょうか？

編集＋SOLUTIONです。

roryf氏の回答をクロスブラウザ（IE5を除く）で動作するように編集しました。

ジャバスクリプトです。 

 function addcss(css){
    var head = document.getElementsByTagName('head')[0];
    var s = document.createElement('style');
    s.setAttribute('type', 'text/css');
    if (s.styleSheet) {   // IE
        s.styleSheet.cssText = css;
    } else {                // the world
        s.appendChild(document.createTextNode(css));
    }
    head.appendChild(s);
 }

どのように解決するのですか？

CSSの文字列を <head> に追加しようとしているので、JavaScript? に CSS の文字列を追加しようとしているのですから、これを行うには <link> 要素よりも <style> 要素よりも

以下は p { color: green; } ルールを追加します。 

<link rel="stylesheet" type="text/css" href="data:text/css;charset=UTF-8,p%20%7B%20color%3A%20green%3B%20%7D" />

これをJavaScriptで作るには、CSSの文字列をURLエンコードし、その文字列を HREF 属性に追加するだけです。のすべての癖よりもずっとシンプルです。 <style> 要素やスタイルシートに直接アクセスするよりもずっと簡単です。 

var linkElement = this.document.createElement('link');
linkElement.setAttribute('rel', 'stylesheet');
linkElement.setAttribute('type', 'text/css');
linkElement.setAttribute('href', 'data:text/css;charset=UTF-8,' + encodeURIComponent(myStringOfstyles));

IE5.5以降で動作します。

マークした解決策も動作しますが、この解決策では dom 操作が少なく、単一の要素しか必要としません。

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します