すべてのブラウザーで JavaScript を使用してスタイル タグを確実に挿入するにはどうすればよいですか?

JavaScript を使用したスタイル タグの挿入: 洗練されたアプローチ

ここで紹介した最初の方法は特定のブラウザーでは目的を達成できますが、次のような問題があります。制限と美的問題。これらの障害を克服するには、幅広いブラウザーの互換性と優雅さを包括する次の洗練されたアプローチを検討してください。

スタイル要素の作成

JavaScript でスタイル タグを作成する鍵は次のとおりです。 HTML ドキュメントの本文ではなく先頭に追加します。そうすることで、主要なブラウザ間で一貫した動作を保証できます。

var head = document.head || document.getElementsByTagName('head')[0];
var style = document.createElement('style');
head.appendChild(style);

スタイル プロパティの設定

スタイル ルールを指定するには、次の type 属性を設定します。 style 要素を「text/css」に設定し、cssText (IE との互換性のため) または appendChild を使用して実際のスタイルを定義します。

style.type = 'text/css';
if (style.styleSheet){
  // This is required for IE8 and below.
  style.styleSheet.cssText = css;
} else {
  style.appendChild(document.createTextNode(css));
}

互換性マトリックス

ブラウザの互換性を確保するには、次の互換性マトリックスを考慮してください:

Browser	Method 1	Method 2
Chrome	No	Yes
Firefox	Yes	Yes
Opera	Yes	Yes
IE7-9	No	Yes

結論

スタイル要素をまた、適切な CSS 設定方法を使用すると、一般的なブラウザ間で確実かつエレガントに動作する JavaScript でスタイル タグを作成できます。

以上がすべてのブラウザーで JavaScript を使用してスタイル タグを確実に挿入するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。