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

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

2.

このメソッドには、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 を使用して、スタイル文字列を

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