Question

我有一个CSS课程

.Foo
{
  width:20px;
}

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

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

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

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

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

Answer 1

您可以更改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 2

您可以使用jquery手动将样式添加到标题中：

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

然后在例如像这样：

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

Answer 3

jQuery.css会在页面上找到所有现有元素，其中包含Foo类，然后设置其内嵌样式{{1} } width。

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

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

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

这可能对你有用.. $（＆＃34; .Foo＆＃34;）。css（＆＃34; width＆＃34;，＆＃34; 40px＆＃34;）;

使用JQuery更改类中的CSS规则

8 个答案: