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

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

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

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

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

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

外部スタイル ファイルを直接導入するのは不適切と思われるため、ページ内で c9ccee2e6ea535a969eb3f532ad9fe89 タグを使用してページ スタイルを挿入する 2 番目のオプションを選択しました。

2. c9ccee2e6ea535a969eb3f532ad9fe89 タグを使用してページ スタイルを挿入します。

このメソッドには、Firefox などのさまざまな標準ブラウザーでは、styleSheet 標準ブラウジングの cssText 値を直接取得できません。 document.styleSheets[0].cssRules[0].cssText は、ブラウザーで単一のスタイルを取得する場合にのみ使用できます。同時に、ページで document.styleSheets[0].cssRules[0].cssText=newcssText を使用します。スタイルは自動的に更新されません。document.styleSheets[0].cssRules[0].style.cssText=newcssText; を使用する必要があります。これは、IE ほどユーザーフレンドリーで単純ではないようです。 YUI では次の優れたメソッドが使用されます。 style.appendChild(document.createTextNode(styles)); createTextNode を使用して、スタイル文字列を c9ccee2e6ea535a969eb3f532ad9fe89 タグに追加します。これらの要素がスクリプトを通じて追加されるかどうかに関係なく、 style 。

以上がJavascriptを使って外部から動的にスタイルやファイルを導入する使い方を詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。