如何使用 JavaScript 动态修改和删除 CSS 类定义？

动态修改和删除 CSS 类定义

在运行时添加 CSS 类是一种已知的 JavaScript 操作，但将其功能扩展到修改或删除现有的类定义可能看起来令人畏惧。本文通过探索以编程方式实现这些操作的方法来解决这一挑战。

更改 CSS 类定义

要编辑 CSS 类定义，请按照以下步骤操作：

1. 使用 document.styleSheets 访问文档的样式表。
2. 循环通过每个样式表的 cssRules 属性找到您要修改的规则。
3. 找到规则后，使用 setProperty 更新其样式属性。

例如修改.menu 类的字体大小：

let styleSheet = document.styleSheets[0];
let rule = styleSheet.cssRules[1]; // Assuming ".menu" is the second rule
rule.style.setProperty('font-size', '15px');

删除 CSS 类定义

要删除 CSS 类定义，请按照以下步骤操作：

1. 按照上一节所述找到样式表和规则。
2. 删除使用deleteRule从cssRules集合中删除规则。

例如，删除.menu 类定义：

let styleSheet = document.styleSheets[0];
let rule = styleSheet.cssRules[1]; // Assuming ".menu" is the second rule
stylesheet.deleteRule(1);

以上是如何使用 JavaScript 动态修改和删除 CSS 类定义？的详细内容。更多信息请关注PHP中文网其他相关文章！