如何使用 JavaScript 動態建立和應用 CSS 類別？

使用JavaScript 動態建立和應用CSS 類別

JavaScript 提供了動態操作CSS 的能力，包括建立新的CSS 類別及其隨後應用於HTML 元素和控制項。

建立 CSS Class

要使用 JavaScript 建立新的 CSS 類，請使用 document.createElement('style') 方法。這創建了一個新的

套用CSS類別

建立CSS類別後，您可以將其套用到HTML 元素或控制項。使用 className 屬性設定所需元素的類別屬性。這會將元素與

範例

以下程式碼片段示範如何動態建立名為 '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 應用程式中。