JavaScript を使用して CSS スタイルシートを文字列として挿入する
Web ページの外観を向上させることは、ユーザー エンゲージメントとカスタマイズに不可欠です。このコンテキストでは、JavaScript を使用して CSS スタイルを動的に挿入する必要がある場合、特に内部ページのスタイルを変更する機能を必要とするブラウザ拡張機能を扱う場合に、課題が発生します。
このようなシナリオでは、シンプルで効果的なアプローチは、HTML 要素の textContent プロパティを活用することです。新しいスタイル要素を作成し、その textContent を目的の CSS ルールで設定し、ドキュメントの先頭に追加することで、開発者は完全なスタイルシートをページに挿入できます。
例は次のとおりです。
<code class="javascript">function addStyle(styleString) { const style = document.createElement('style'); style.textContent = styleString; document.head.append(style); } addStyle(` body { color: red; } `); addStyle(` body { background: silver; } `);</code>
この手法では、提供された CSS ルールを順番に挿入し、開発者が必要に応じて複数のスタイルを定義できるようにします。
あるいは、クロージャを使用した少し異なるアプローチにより、後続の addStyle function:
<code class="javascript">const addStyle = (() => { const style = document.createElement('style'); document.head.append(style); return (styleString) => style.textContent = styleString; })(); addStyle(` body { color: red; } `); addStyle(` body { background: silver; } `);</code>