Chrome との互換性のために JavaScript で作成されたスタイルタグを最適化するにはどうすればよいですか?

JavaScript で作成したスタイル タグを Chrome 互換性のために最適化する

JavaScript でスタイル タグを作成すると、Web ページの動的なスタイルを強化できます。これを実現するにはいくつかの方法がありますが、すべての方法がブラウザ間で一貫して実行できるわけではありません。具体的には、この記事では、Google Chrome との互換性の問題を解決する改良された手法について説明します。

最初のアプローチでは、innerHTML を使用して divNode 内にスタイル タグを作成しますが、Chrome を除くブラウザ間の互換性があり、見た目の問題が発生します。 Internet Explorerで。これに対処するために、修正されたメソッドが提案されています。

var css = 'h1 { background: red; }',
    head = document.head || document.getElementsByTagName('head')[0],
    style = document.createElement('style');

head.appendChild(style);

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

この修正されたメソッドでは、スタイル要素がドキュメントの本文ではなくヘッドに追加されます。この変更により、Chrome との互換性が確保され、Internet Explorer で追加のプレースホルダ (
タグ) が不要になります。

この手法は、主要なブラウザ (IE7 ～ 9、Firefox、Opera、およびChrome) であり、信頼性が高く効率的であることが証明されています。

以上がChrome との互換性のために JavaScript で作成されたスタイルタグを最適化するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。