jquery - jquery 可以操纵文档的全局 css 定义吗？

Question

我正在尝试制作一个复选框，在单击时将隐藏特定的 css 类，但我也希望此效果适用于所有获得该特定类的 future 对象。

例如:我有 2 个 div:

divA 属于 abc 类

divB 没有类

我希望复选框隐藏类 abc 的所有 div，这很简单，使用 $(".abc").hide()。但问题是，如果网站的另一部分稍后制作了 abc 类的 divB，那么它就不会被隐藏。因为 jquery 代码当时只会应用于 divA。

我想做的是让复选框操纵文档的全局 css 定义。因此，当用户单击该复选框时，我会将 abc 类更改为隐藏，之后每当任何 div 加入该类时，它都会被隐藏。

这在 jquery 中可能吗？

Answer 1

您可以使用 insertRule和 addRule (必要时)向 .abc 选择器添加新规则的方法。这应该会影响将来应用该类的任何事情。

var stylesheet = document.styleSheets[0],
    selector = ".abc", rule = "{color: red}";

if (stylesheet.insertRule) {
    stylesheet.insertRule(selector + rule, stylesheet.cssRules.length);
} else if (stylesheet.addRule) {
    stylesheet.addRule(selector, rule, -1);
}

为此还有一个 jQuery 插件:$.rule()；可在 https://github.com/flesler/jquery.rule 获得