Change CSS rule in class using JQuery

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.

Answers:

Answer

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

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

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

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

You should be selecting an element with jQuery. You're aware that you aren't selecting the CSS class itself, correct?

Once you have an element with class="Foo", you can select it as you have, and either set css properties manually like you're trying to do, or you can use add class like so:

$(".Foo").addClass('Foo');

Granted of course, since you're selecting the same class that you're adding, it doesn't really make sense.

Answer

I got thsi example in CSS api help in JQuery API.

this worked for me : http://jsfiddle.net/LHwL2/

for complete help read the css api at http://api.jquery.com/css/

Answer

Try using multiple styles

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

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

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

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.