如何動態修改 CSS 類別定義？

CSS 類別定義的動態修改

動態變更 CSS 類別定義可能是動態 Web 應用程式的基本功能。雖然新增類別很容易完成，但修改或刪除現有定義卻帶來了不同的挑戰。

修改CSS 類別規則

更改CSS 的字體大小規則“.menu”類別：

// Get the stylesheet index
const sheetIndex = document.styleSheets.length - 1;

// Get the CSS rule object
const rule = document.styleSheets[sheetIndex].cssRules[0];

// Set the new font size
rule.style.setProperty('font-size', '10px', null);

這將使用“.menu”更新所有元素的字體大小

刪除CSS類別定義

要完全刪除「.menu」類別定義：

// Get the stylesheet index
const sheetIndex = document.styleSheets.length - 1;

// Remove the rule from the stylesheet
document.styleSheets[sheetIndex].deleteRule(0);

這將刪除「.menu」類別定義。樣式表中的「menu」類別定義，導致使用它的所有元素都丟失這些樣式

注意：使用這些技術時請務必記住瀏覽器相容性，因為並非所有瀏覽器都支援全部CSS 操作功能。

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