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

本文で JavaScript を使用してヘッド セクションにスタイルシートを追加する

Web サイトのヘッドに CSS スタイルシートを追加する必要があるシナリオが発生した場合セクションを編集できますが、head を直接編集することは制限されているため、JavaScript コードを使用してスタイルシートを動的に挿入できます。 link 要素を head セクションに挿入することが推奨されていますが、ほとんどのブラウザは本文内でリンク要素を適切に処理します。

これを実現する方法は次のとおりです。

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);
}

addCss('{my-url}');

jQuery を使用したより簡単なアプローチについては、 :

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

addCss("{my-url}");

本文の末尾にリンク要素を追加する代わりに (技術的にはリンク要素の推奨される場所ではありません)、JavaScript を使用してリンク要素を head セクションに直接挿入することもできます:

$('head').append('<link rel="stylesheet" type="text/css" href="{url}">');

JavaScript を利用すると、ヘッド自体を編集するための直接アクセス権がない場合でも、Web サイトのヘッド セクションにスタイルシートを効果的に追加できます。

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