JavascriptでCSSファイルを動的に参照する2つの方法を紹介_基礎知識

私は最近、スタイルを動的に挿入するために JavaScript を必要とするプロジェクトに取り組みましたが、以前の方法は失敗しました。 2時間もチェックした理由は私の手が悪いことが判明しました。これについては最後にお話しましょう。

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

includeLinkStyle("http://css.jb51.net/home/css/reset.css?v=20101227");

ただし、現在取り組んでいるプロジェクトでは、適用されているスタイルがほとんどないため、外部スタイル ファイルを直接導入するのは不適切と思われるため、