如何在 JavaScript 中動態變更和刪除 CSS 類別定義？

動態CSS 操作：在JavaScript 中更改和刪除類別定義

雖然在運行時添加CSS 類別是JavaScript 中眾所周知的技術，修改和刪除現有類別定義的能力同樣重要。本文探討了動態變更和刪除 CSS 類別定義的技術，使開發人員能夠即時更改其網頁的外觀。

更改 CSS 類別定義

修改 CSS 類別定義在執行時的 CSS 類別中，可以利用 CSSStyleSheet.cssRules 屬性，該屬性傳回樣式表中所有 CSS 規則的陣列。循環遍歷此數組可以識別和修改特定規則。

例如，要更改.menu 類別的字體大小規則，可以使用以下程式碼：

const stylesheet = document.styleSheets[0];
const ruleIndex = stylesheet.cssRules.findIndex(rule => rule.selectorText === '.menu');
if (ruleIndex !== -1) {
  stylesheet.cssRules[ruleIndex].style.setProperty('font-size', '10px', null);
}

刪除CSS 類別定義

刪除CSS 類比修改它稍微定義簡單一些。 CSSStyleSheet.deleteRule() 方法允許透過 cssRules 陣列中的索引刪除特定規則。

要刪除.menu 類別定義，可以使用以下程式碼：

const stylesheet = document.styleSheets[0];
const ruleIndex = stylesheet.cssRules.findIndex(rule => rule.selectorText === '.menu');
if (ruleIndex !== -1) {
  stylesheet.deleteRule(ruleIndex);
}

透過利用這些技術，開發人員能夠動態操縱網頁的外觀，提供高度互動和可自訂的使用者體驗。

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