JavaScript を使用した CSS の組み込み CSS スタイルシートは、Web ページの外観をカスタマイズするために不可欠です。しかし、特定の条件やユーザーの操作に基づいて CSS を動的に変更したい場合はどうすればよいでしょうか?ここで Javascript が登場します。 JavaScript を使用した CSS ルールの追加 JavaScript を使用して CSS ルールを追加する主な方法は、新しいスタイル ノードを作成して、書類。これには次の手順が含まれます: スタイル ノードの作成: HTML の作成</li> <li> <strong>スタイル ノードを追加します:</strong> 作成したスタイル ノードを <head> に追加します。 document.head.appendChild(styleSheet).</li> </ol> <p><strong>を使用したドキュメントの要素:</strong></p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre>// CSS rules as text var styles = ` .my-custom-class { color: red; font-weight: bold; } `; // Create a style node var styleSheet = document.createElement("style"); styleSheet.textContent = styles; // Add the style node to the head document.head.appendChild(styleSheet);</pre><div class="contentsignin">ログイン後にコピー</div></div> <p>このアプローチを使用すると、CSS スタイルを動的に変更できますユーザーのアクションやアプリケーション ロジックの変更に応答します。</p>
