Javascriptを使って外部から動的にスタイルやファイルを導入する使い方を詳しく解説

JavaScript 挿入スタイルは、フロントエンド開発、特にフロントエンドのパフォーマンスやページ スキニングを変更する場合に広く使用されています。

一般に、JavaScript の動的挿入スタイルには 2 つのタイプがあります。1 つは、 の タグを使用して外部スタイル ファイルを導入する方法です。 ; style> タグはページのスタイルを挿入します (これは style 属性ではありません)。

1. ページに外部スタイルを導入します:

で タグを使用して、外部スタイル ファイルを導入します。これは、さまざまな主流ブラウザとの互換性の問題がありません。

function includeLinkStyle(url) {
 var link = document.createElement("link");
 link.rel = "stylesheet";
 link.type = "text/css";
 link.href = url;
 document.getElementsByTagName("head")[0].appendChild(link);
}

外部スタイル ファイルを直接導入するのは不適切と思われるため、ページ内で