<スタイル> の作成JavaScript を使用したタグ: 包括的なソリューション この記事では、 を挿入するためのさまざまなアプローチを検討します。 JavaScript を使用して HTML ページにタグを追加します。その過程で、互換性の問題に対処し、より洗練された解決策を提案します。</p> <h3>divNode.innerHTML を試してください</h3> <p>質問で説明されているように、<style> を作成します。 divNode.innerHTML 経由のタグには問題があります。特定のブラウザでは動作しますが、Chrome との互換性は依然としてなく、不必要なマークアップが導入されます。</p> <h3>洗練されたソリューション</h3> <p>既存のアプローチを改善するには、<style> を追加できます。要素を本文ではなくドキュメントの先頭に追加します:</p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre>var css = "h1 { background: red; }"; var head = document.head || document.getElementsByTagName("head")[0]; var style = document.createElement("style"); head.appendChild(style); style.type = "text/css"; if (style.styleSheet) { style.styleSheet.cssText = css; // IE8 and below } else { style.appendChild(document.createTextNode(css)); }</pre><div class="contentsignin">ログイン後にコピー</div></div> <p>このアプローチは、IE 7 ～ 9、Firefox、Opera、Chrome でテストされており、ブラウザ間の互換性が保証されています。</p> <h3>代替アプローチ</h3> <p><strong>非標準的な方法を避ける:</strong> divNode.innerHTML を使用したタグの使用は標準的な方法とは見なされないため、避けてください。</p> <p><strong>ブラウザ サポートの制限:</strong> divNode.innerHTML をサポートするブラウザのみに依存することは、広範なアプリケーションには現実的ではない可能性があります。 .</p> <h3>結論</h3> <p>洗練されたソリューションを組み込むか、認識することで代替アプローチの制限を克服して、<style> を効果的に作成できます。タグを JavaScript で使用することで、主要なブラウザ間での互換性を確保し、クリーンで保守可能なコードを維持します。</p>
