在網頁開發中，CSS（層疊樣式表）被廣泛應用于網頁設計中的樣式管理。然而，當我們需要根據特定元素或動態事件來應用樣式時，我們就需要使用 JavaScript 動態添加樣式表了。 我們可以使用 JavaScript 來動態地處理 CSS 樣式，可以輕松地添加新的樣式規則、在現有規則中進行更新和刪除操作，極大地方便了網頁開發人員的工作。 例如，我們想要實現鼠標懸浮在按鈕上時，讓按鈕顏色變成藍色。可以通過下面的代碼來實現：

// 創建一個新的樣式表
var style = document.createElement("style");
// 指定樣式表類型
style.type = "text/css";
// 添加規則
style.innerHTML = ".btn:hover { background-color: blue; }";
// 將樣式表添加到文檔頭部
document.head.appendChild(style);

在上面的代碼中，我們通過 document.createElement() 方法創建了一個新的 style 元素，并通過 type 屬性指定了該元素的類型為 "text/css"。 然后，我們使用了 innerHTML 屬性來添加樣式規則，該規則將會在按鈕被鼠標懸浮時生效。 最后，我們使用 document.head.appendChild() 方法將新的樣式表添加到文檔頭部。這樣，樣式表中的規則便可以全局生效了。 除了添加樣式規則，JavaScript 動態處理 CSS 還可以使用以下方法來操作樣式表： 1. 修改樣式規則

// 獲取指定樣式表
var style = document.getElementById("my-style");
// 獲取規則列表
var rules = style.sheet.cssRules || style.sheet.rules;
// 遍歷規則列表，找到需要修改的規則
for (var i = 0; i< rules.length; i++) {
 if (rules[i].selectorText === ".my-class") {
// 修改規則
rules[i].style.backgroundColor = "blue";
break;
 }
}

在上面的代碼中，我們首先使用 document.getElementById() 方法獲取指定的樣式表，然后使用 sheet.cssRules 或 sheet.rules 屬性獲取樣式表的規則列表。 接著，我們遍歷規則列表，找到需要修改的規則，并使用 style 屬性來修改規則的屬性。 2. 刪除樣式規則

// 獲取指定樣式表
var style = document.getElementById("my-style");
// 獲取規則列表
var rules = style.sheet.cssRules || style.sheet.rules;
// 遍歷規則列表，找到需要刪除的規則
for (var i = 0; i< rules.length; i++) {
 if (rules[i].selectorText === ".my-class") {
// 刪除規則
style.sheet.deleteRule(i);
break;
 }
}

在上面的代碼中，我們使用 deleteRule() 方法來刪除指定位置的規則，可以通過遍歷規則列表，找到需要刪除的規則的位置后再執行該方法來實現刪除操作。 JavaScript 動態處理 CSS 樣式表是一種很方便的方法，可以滿足很多動態、多樣化的網頁設計需求。我們只需要掌握好相關 API 和操作方法，便可以輕松應對各種樣式需求。