Change CSS class properties with jQuery

Question

Is there a way to change the properties of a CSS class, not the element properties, using jQuery?

This is a practical example:

I have a div with class

Answer 1

$(document)[0].styleSheets[styleSheetIndex].insertRule(rule, lineIndex);

---

styleSheetIndex is the index value that corresponds to which order you loaded the file in the (e.g. 0 is the first file, 1 is the next, etc. if there is only one CSS file, use 0).

rule is a text string CSS rule. Like this: "body { display:none; }".

lineIndex is the line number in that file. To get the last line number, use $(document)[0].styleSheets[styleSheetIndex].cssRules.length. Just console.log that styleSheet object, it's got some interesting properties/methods.

Because CSS is a "cascade", whatever rule you're trying to insert for that selector you can just append to the bottom of the CSS file and it will overwrite anything that was styled at page load.

In some browsers, after manipulating the CSS file, you have to force CSS to "redraw" by calling some pointless method in DOM JS like document.offsetHeight (it's abstracted up as a DOM property, not method, so don't use "()") -- simply adding that after your CSSOM manipulation forces the page to redraw in older browsers.

---

So here's an example:

var stylesheet = $(document)[0].styleSheets[0]; stylesheet.insertRule('body { display:none; }', stylesheet.cssRules.length);