JavaScript はどのようにして CSS クラスを動的に作成して適用できるのでしょうか?

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

CSS クラス スタイルを動的に作成および適用すると、Web アプリケーションの柔軟性と保守性が向上します。 。 JavaScript を使用してこれを実現する方法は次のとおりです:

スタイル要素を作成します:

カスタマイズされた CSS ルールを保存するためにスタイル要素を初期化します:

const style = document.createElement('style');

セットタイプとインナーHTML:

スタイルのタイプを 'text/css' として指定し、その innerHTML 内に必要なルールを挿入します:

style.type = 'text/css';
style.innerHTML += '.cssClass { color: #f00; }';

スタイル要素を Head に追加します:

HTML の head セクションに style 要素を追加します。 document:

document.getElementsByTagName('head')[0].appendChild(style);

HTML 要素への CSS クラスの割り当て:

CSS クラスを定義したら、それを div、tables などの HTML 要素に割り当てることができます。スパン。たとえば、次のコードは、ID が 'someElementId' の要素に 'cssClass' を追加します。

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

CSS クラスを ASP.NET コントロールに適用する:

ASP.NET では、class 属性を使用して、TextBox、DropDownList、DataList などのコントロールに CSS クラスを適用できます。例:

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