JavaScript を使用してスタイルシートを動的に head に追加するにはどうすればよいですか?

JavaScript を使用してスタイルシートをヘッドに動的に追加する

多くのコンテンツ管理システム (CMS) ではヘッド セクションへのアクセスが制限されているため、追加のスタイルシートを組み込みます。ただし、JavaScript を使用した賢い解決策により、この問題に効果的に対処できます。

function addCss(fileName) {
  var head = document.head;
  var link = document.createElement("link");

  link.type = "text/css";
  link.rel = "stylesheet";
  link.href = fileName;

  head.appendChild(link);
}

の後の head セクションにスタイルシートを挿入するには。タグを使用すると、JavaScript の機能を活用してドキュメント オブジェクト モデル (DOM) を操作できます。次のコード スニペットは、この手法を示しています。

function addCss(fileName) {
  var link = $("<link />", {
    rel: "stylesheet",
    type: "text/css",
    href: fileName
  });
  $('head').append(link);
}

jQuery を使用した簡単なソリューションについては、次の点を考慮してください。

注: 最近の仕様では、使用が禁止されています。 の 内の要素タグ。ただし、ほとんどのブラウザでは依然として正しくレンダリングされます。したがって、スタイルシートを に追加します。タグは技術的には実現可能ですが、仕様に準拠するには、タグを 内に配置する必要があります。代わりにタグを付けます。

以上がJavaScript を使用してスタイルシートを動的に head に追加するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。