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:

$(\".Fo         


        

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

Answer 2

you could add the styling manually to the header with jquery:

  $('head').append('<style id="addedCSS" type="text/css">.Foo {width:40px;}</style>');

then change it on an event like e.g. so:

  $(window).resize(function(){
     $('#addedCSS').text('.Foo {width:80px;}');
  });

Answer 3

Yes, you should use addClass and removeClass to change the styling. In your css, define a couple of different classes and switch between them.

Answer 4

jQuery.css will find all existing elements on the page that have the Foo class, and then set their inline style width to 40px.

In other words, this doesn't create or change a css rule -- if you dynamically add an element with the Foo class, it would still have a width of 20px, because its inline style hasn't been set to override the default CSS rule.

Instead, you should use addClass and removeClass and control the styles in your static CSS.

Answer 5

This may work for you.. $(".Foo").css("width", "40px");

Answer 6

Try using multiple styles

.FooSmall
{
  width:20px;
}
.FooBig
{
  width:40px;
}

$('#theTarget').removeClass('FooSmall').addClass('FooBig');