使用JQuery更改类中的CSS规则

我有一个CSS类

.Foo { width:20px; } 

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

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

这不起作用。 这是错误的做法吗？ 我应该使用addClass（）和removeClass（）吗？

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

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

Answer 1

jQuery.css将在页面上找到所有具有Foo类的现有元素，然后将其内联样式width 40px为40px 。

换句话说，这不会创建或更改css规则 – 如果动态添加具有Foo类的元素，它仍然具有20px的宽度，因为其内联样式尚未设置为覆盖默认CSS规则。

相反，您应该使用addClass和removeClass并控制静态CSS中的样式。

Answer 2

您可以更改CSS样式规则。 你需要看看：

document.styleSheets集合
styleSheet.cssRules属性（或IE7和IE8的styleSheet.rules）
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

Answer 3

你可以使用jquery手动添加样式到标题：

  $('head').append(''); 

然后在例如这样的事件上改变它：

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

Answer 4

是的，您应该使用addClass和removeClass来更改样式。 在你的css中，定义几个不同的类并在它们之间切换。

Answer 5

你应该用jQuery选择一个元素。 您知道自己没有选择CSS类，对吗？

一旦你有一个class =“Foo”的元素，你可以像你一样选择它，并像你想要的那样手动设置css属性，或者你可以像这样使用add class：

$（ “富”）addClass（ ‘富’）。

当然，当然，因为你选择的是你正在添加的同一个类，所以它并没有真正意义。

Answer 6

我在JQuery API的CSS api帮助中得到了这个例子。

这对我有用 ： http ： //jsfiddle.net/LHwL2/

如需完整帮助，请访问http://api.jquery.com/css/阅读css api

Answer 7

尝试使用多种样式

 .FooSmall { width:20px; } .FooBig { width:40px; } $('#theTarget').removeClass('FooSmall').addClass('FooBig'); 

Answer 8

这可能对你有用.. $（“。Foo”）。css（“width”，“40px”）;