如何动态修改 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中文网其他相关文章！