如何使用 JavaScript 动态创建和应用 CSS 类？

使用 JavaScript 动态创建和应用 CSS 类

JavaScript 提供了动态操作 CSS 的能力，包括创建新的 CSS 类及其随后应用于 HTML 元素和控件。

创建 CSS Class

要使用 JavaScript 创建新的 CSS 类，请使用 document.createElement('style') 方法。这创建了一个新的

示例

以下代码片段演示了如何动态创建名为 'cssClass' 的 CSS 类并将其应用于

<div> 元素。 element:

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';

在 HTML 中，您可以使用以下代码创建一个

<div>将应用“cssClass”样式的元素：

<div>

通过这种方法，您可以动态创建和应用 CSS 类，使您能够根据特定条件或事件控制 HTML 元素和控件的样式在您的 JavaScript 应用程序中。