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

我正在尝试创建一个复选框，在单击时隐藏特定的css类，但我也希望此效果应用于获取该特定类的所有未来对象。

例如：我有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上找到

Answer 2

我可能会通过让你的复选框添加并从元素中删除一个类来处理这个问题：

 $('body').toggleClass('hideABC'); 

并拥有以下CSS：

 body.hideABC div.abc { display:none; } body div.abc { display:block; } 

因此，如果您的页面中的其他地方

添加了“.abc”类，那么它将采用第一个CSS规则并被隐藏。