如何在 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中文网其他相关文章！