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.

---

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.

---

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

---

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 eg so:

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

链接地址: http://www.djcxy.com/p/16994.html

上一篇: 使用node.js作为简单的Web服务器

下一篇: 使用JQuery在类中更改CSS规则