Change CSS rule in class using JQuery

Question

I have a class in CSS

.Foo {   width:20px; } 

Using Jquery I would like to do something similar to this on an event:

$(".Foo").css("width", "40px"); 

This doesn't work. Is this the wrong approach? Should I use addClass() and removeClass()?

EDIT: I figured out my problem. This command does in fact work. In my particular application I hadn't created the elements using the class before I used the command, so when they were created nothing was changed.

Basically this command doesn't change the CSS style rule, just the elements using the class.

Answer 1

You can change a CSS style rule. You need to look at:

document.styleSheets collection
styleSheet.cssRules property (or styleSheet.rules for IE7 and IE8)
rule.selectorText property
rule.style property

For example:

var ss = document.styleSheets[0]; var rules = ss.cssRules || ss.rules; var fooRule = null; for (var i = 0; i < rules.length; i++) {     var rule = rules[i];     if (/(^|,) *\.Foo *(,|$)/.test(rule.selectorText))     {         fooRule = rule;         break;     } } fooRule.style.width = "40px"; 

Working demo: jsfiddle.net/kdp5V