ホームページ  >  記事  >  ウェブフロントエンド  >  本文からJavaScriptを使用してヘッドにスタイルシートを挿入するにはどうすればよいですか?

本文からJavaScriptを使用してヘッドにスタイルシートを挿入するにはどうすればよいですか?

Barbara Streisand
Barbara Streisandオリジナル
2024-11-14 19:34:02619ブラウズ

How to Inject a Stylesheet into the Head with JavaScript from the Body?

本文に JavaScript を使用してヘッドにスタイルシートを挿入する

を編集できないWeb サイトに CSS スタイルシートを追加する必要がある場合、CMS のセクションに問題が生じる可能性があります。この問題は、JavaScript を利用してスタイルシートを に直接挿入することで解決できます。スクリプト自体が セクションの最後に追加されている場合でも、

これを実現するには、新しい タグを追加します。要素は JavaScript を使用して動的に作成されます。この要素は適切な属性で構成されます:

  • type: "text/css"
  • rel: "stylesheet"
  • href: スタイルシートの URL

作成されると、

がロードされます。要素は に追加されます。

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

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

  head.appendChild(link);
}

addCss('{my-url}');
例:

このコードは、新しい を作成します。要素に指定された href を追加し、それを に追加します。

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

addCss("{my-url}");
jQuery の使用:

注: を追加することは技術的には可能ですが、要素を に追加します。セクションでは、HTML 仕様に違反するため推奨されません。したがって、要素を に追加することが好ましい。コンプライアンスと将来のブラウザ互換性の問題についてのセクション。

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

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。