25

i'm trying to make a checkbox that will hide a specific css class when clicked, but i also want this effect to apply to all future objects that get that specific class.

for example: i have 2 divs:

divA is of class abc

divB has no class

i want the checkbox to hide all divs of class abc, this is easy, using $(".abc").hide(). but the problem is that if another part of the site made divB of class abc later on, then it won't be hidden. because the jquery code would've only applied to divA at the time.

what i'm trying to do is make the checkbox manipulate the global css definition of the document. so when the user clicks the checkbox, i would change the abc class to be hidden, and later whenever any div joins that class, it would be hidden.

is this possible in jquery?

Moe Salih
  • 723
  • 1
  • 7
  • 15
  • Here is a similar question with a good answer: http://stackoverflow.com/questions/1079237/jquery-equivalent-of-yui-stylesheet-utility – Jourkey Aug 29 '09 at 03:09

2 Answers2

33

You can use the insertRule and addRule (when necessary) methods to add new rules to the .abc selector. That should affect anything in the future that gets that class applied to it.

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);
}

There is a jQuery plugin for this also: $.rule(); It's available at https://github.com/flesler/jquery.rule

Sampson
  • 265,109
  • 74
  • 539
  • 565
  • 5
    Thanks for the answer. Though I should mention that this code will only work in IE. My app is a greasemonkey script, so after spending hours looking online, it turns out for firefox the syntax should be: document.styleSheets[0].insertRule(".abc { display:none; }", 0); – Moe Salih Aug 31 '09 at 17:11
  • Doesn't work in modern Firefox. You get: "Error: The operation is insecure." – caponica May 15 '15 at 10:09
  • This method is only for IE, it appears to have no support outside of it and is not even mentioned on caniuse.com: http://caniuse.com/#search=insertRule – laurent Aug 19 '16 at 08:48
  • @this.lau_ `insertRule` is supported by [all major browsers](https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleSheet/insertRule#Browser_compatibility). – Sampson Aug 19 '16 at 21:30
20

I would probably handle this by having your checkbox add and remove a class form the <body> element:

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

And have the following CSS:

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

So, if elsewhere in your page a <div> gets the '.abc' class added to it, then it will take on the first CSS rule and be hidden.

Raleigh Buckner
  • 8,343
  • 2
  • 31
  • 38
  • 2
    To my mind this is a much better (and in particular simpler) approach than the alternatives. Why so few votes? Is there some flaw with this approach? – Robert Tupelo-Schneck Jul 06 '12 at 03:42
  • 1
    That's really clever and seems like it would be much more reliable cross-browser than trying to add new rules into the stylesheet. I can't think of any downsides to that approach. – daGUY Dec 19 '12 at 15:08
  • 1
    This looks simple now, but it would become a whole lot more complex to work with once you started applying the class programmatically to data rendered from AJAX polling, for example. – rvr_jon Apr 14 '13 at 14:23