如何在 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>

說明：

1. 建立 CSS 類別：

   • 建立 CSS 類別：
   建立 CSS 類別：

2. 建立 CSS 類別：

   • 建立 CSS 類別：
3. 建立 CSS 類別：
   建立 CSS 類別：
   • 建立 CSS 類：

我們建立了一個新的元素並將其類型設為「text/css」。

我們使用innerHTML 為新類別（本例為.cssClass）設定CSS 程式碼。 將 CSS 新增至頁面：我們附加 的新樣式元素該檔案的。這使得 CSS 可用於整個頁面。 將類別應用到元素：我們檢索我們想要使用getElementById() 根據其ID 設定樣式的HTML 元素。 然後我們設定將元素的 className 屬性變更為我們建立的 CSS 類別的名稱，在本例中為「cssClass」。 此技術可讓您將自訂樣式表類別指派給任何 HTML執行時間的元素或控制項。您可以修改innerHTML屬性中的CSS類別定義來定義所需的樣式。

以上是如何在 JavaScript 中動態新增和應用 CSS 類別？的詳細內容。更多資訊請關注PHP中文網其他相關文章！