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

在JavaScript 中動態建立和應用CSS 類別

動態建立和應用CSS 類別樣式可以增強Web 應用程式的靈活性和可維護性。以下是如何使用JavaScript 實現此目的：

建立樣式元素：

初始化樣式元素以儲存自訂CSS 規則：

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

設定類型和內部HTML：

指定樣式的類型為“text/css”，並在其insideHTML 中插入所需的規則：

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

將樣式元素附加到Head：

將樣式元素附加到HTML 文件的head部分：

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

將CSS 類別指派給HTML元素：

定義CSS 類別後，您可以將其指派給HTML 元素，例如div、表格和元素，例如div、表格和元素span。例如，以下程式碼將'cssClass' 加入id 為'someElementId' 的元素：

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

將CSS 類別套用到ASP.NET 控制項：

在ASP.NET 中，您可以使用class 屬性將CSS 類別套用到TextBoxes、DropDownLists 和DataLists等控件。例如：

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