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

動態修改並刪除 CSS 類別定義

在執行時間操作 CSS 類別定義可以動態控制 Web 元素的視覺外觀。這對於根據特定條件或使用者偏好自訂使用者體驗非常有用。

修改 CSS 類別定義

要修改現有 CSS 類別定義，您可以使用 document.styleSheets 屬性存取樣式表規則。然後可以使用rule.style屬性更新每個規則。

例如，將.menu類別的字體大小改為10px：

// Get the stylesheet
const stylesheet = document.styleSheets[0];

// Find the .menu rule
const rule = Array.from(stylesheet.cssRules).find(r => r.selectorText === '.menu');

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

刪除CSS類別定義

要刪除CSS類別定義，可以使用document.styleSheets的deleteRule方法

例如，要刪除.menu類別定義：

stylesheet.deleteRule(stylesheet.cssRules.length - 1); // Assuming .menu is the last rule

或者，您可以將規則的 display 屬性設為 none 以有效隱藏使用該類別的元素。

rule.style.setProperty('display', 'none', null);

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