javascript - 使用 JQuery 更改类中的 CSS 规则

Question

我有一门 CSS 类(class)

.Foo
{
  width:20px;
}

我想使用 Jquery 在事件上做类似的事情:

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

这行不通。这是错误的方法吗？我应该使用 addClass() 和 removeClass() 吗？

编辑:我发现了我的问题。这个命令确实有效。在我的特定应用程序中，我在使用命令之前没有使用该类创建元素，因此创建它们时没有任何更改。

基本上这个命令不会改变 CSS 样式规则，只会改变使用该类的元素。

Answer 1

您可以更改 CSS 样式规则。您需要查看:

document.styleSheets 集合
styleSheet.cssRules 属性(或 styleSheet.rules 适用于 IE7 和 IE8)
rule.selectorText 属性
rule.style 属性

例如:

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";

工作演示:jsfiddle.net/kdp5V