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

Moe*_*lih 24 css jquery

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

例如:我有2个div:

divA属于abc类

divB没有课

我希望复选框隐藏所有类的div abc,这很容易,使用$(".abc").hide().但问题是,如果网站的另一部分abc稍后创建了类的divB ,那么它将不会被隐藏.因为jquery代码当时只适用于divA.

我要做的是让复选框操纵文档的全局css定义.因此,当用户单击该复选框时,我将更改abc要隐藏的类,稍后当任何div加入该类时,它将被隐藏.

这有可能在jquery?

Sam*_*son 32

您可以使用insertRuleaddRule(必要时)方法向.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);
}
Run Code Online (Sandbox Code Playgroud)

有一个jQuery插件,这也:$.rule(); 它可以在https://github.com/flesler/jquery.rule上找到

  • 谢谢你的回答.虽然我应该提一下,这段代码只适用于IE.我的应用程序是一个greasemonkey脚本,所以花了几个小时在线查看,结果是firefox的语法应该是:document.styleSheets [0] .insertRule(".abc {display:none;}",0); (5认同)
  • 现在jquery.rule住在https://github.com/flesler/jquery.rule ... (4认同)

Ral*_*ner 18

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

$('body').toggleClass('hideABC');
Run Code Online (Sandbox Code Playgroud)

并拥有以下CSS:

body.hideABC div.abc { display:none; }
body div.abc { display:block; }
Run Code Online (Sandbox Code Playgroud)

因此,如果您的页面中的其他地方<div>添加了".abc"类,那么它将采用第一个CSS规则并被隐藏.

  • 在我看来,这是一种比替代品更好(特别是更简单)的方法.为什么选票太少?这种方法有一些缺陷吗? (2认同)