JavaScript 如何動態建立 CSS 類別並將其套用到 HTML 元素？

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

動態產生CSS 類別並將其應用到HTML 元素是一種常用於自定義Web 的技術頁面和控制項。 JavaScript 提供了一種強大的方法來實現此目的，並且可以應用於多種元素，包括 div、表格、span 以及文字方塊和下拉清單等 HTML 控制項。

範例程式碼：

要動態建立 CSS類別並將其指派給元素，請遵循以下步驟步驟：

1. 在文件中建立一個新的樣式元素：

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

2. 設定元素的類型：

   style.type = 'text/css';

3. 將CSS樣式指定給​​element:

   style.innerHTML = '.cssClass { color: #f00; }';

4. 將樣式元素附加到文件的頭部：

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

5. 將類別分配給所需的元素：

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

HTML示例：

要演示CSS 類的動態創建和分配，請考慮以下內容HTML:

<div>
<p><strong>結果:</strong></p>
<p>動態建立的CSS 類別將應用於ID 為「someElementId」的元素，從而導致以下變更：</p>
<ul>
<li>div 元素內的文字將以紅色顯示。 </li>
<li>div 元素將以紅色顯示具有「cssClass」的類別屬性。 </li>
</ul>
<p>此範例說明 JavaScript 如何讓您能夠建立自訂樣式表並將其動態套用到網頁上的任何元素或 ASP.NET 頁面上的控制項。 </p>
</div>

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