JavaScript で CSS クラスを動的に追加して適用するにはどうすればよいですか?

JavaScript での動的 CSS クラスの作成と適用

複雑な Web アプリケーションを操作する場合、HTML 要素にカスタム CSS クラスを追加する必要があります。そして動的に制御します。これにより、柔軟性とコードの保守性が向上します。

解決策:

はい、JavaScript で CSS クラスを動的に作成して適用することができます。以下にその方法を示す例を示します。

var style = document.createElement('style');
style.type = 'text/css';
style.innerHTML = '.cssClass { color: #f00; }';
document.getElementsByTagName('head')[0].appendChild(style);

document.getElementById('someElementId').className = 'cssClass';

<div>
<p><strong>説明:</strong></p>
<ol>
<li>
<p><strong>CSS クラスの作成:</strong> </p>
<ul>
<li>新しいものを作成します </li>
<li>innerHTML を使用して、新しいクラス (この場合は .cssClass) の CSS コードを設定します。</li>
</ul>
</li>
<li>
<p><strong>CSS をページ:</strong></p>
<ul><li>新しいスタイル要素を  に追加します。文書の。これにより、CSS をページ全体で利用できるようになります。</li></ul>
</li>
<li>
<p><strong>クラスを要素に適用する:</strong></p>
<ul>
<li> getElementById() を使用して ID でスタイルを設定したい HTML 要素。</li>
<li>次に設定します。要素の className プロパティを、作成した CSS クラスの名前 (この例では「cssClass」) に置き換えます。</li>
</ul>
</li>
</ol>
<p>この手法を使用すると、カスタム スタイルシート クラスを任意のクラスに割り当てることができます。実行時の HTML 要素またはコントロール。 innerHTML プロパティの CSS クラス定義を変更して、目的のスタイルを定義できます。</p>
</div>

以上がJavaScript で CSS クラスを動的に追加して適用するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。