使用JQuery更改类中的CSS规则

Question

使用JQuery更改类中的CSS规则

27

我在 CSS 中有一个类

.Foo
{
  width:20px;
}

我想用jQuery在事件上执行类似于以下操作：

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

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

编辑：我找到了问题所在。实际上这个命令是可以起作用的。在我的特定应用程序中，在使用命令之前，我还没有使用这个类创建元素，因此当它们被创建时什么也没有改变。

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

- jdw

2

你能否查看控制台并确认是否有任何错误？那个命令应该可以工作。 - Ascherer

8个回答

18

你可以使用jQuery手动将样式添加到头部：

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

然后在事件中进行更改，例如：

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

- nerdess

啊，不错。简单而优雅，正是我所寻找的——尽管现在我重新阅读上面的问题，也许并不是最好的答案。 - Lambart

1

我认为你的意思是 $（'head'）（而不是'header'）！ :) - Lambart

这是一种非常棒的技术，可以编写样式表规则：如果没有运行JavaScript或jQuery，则两部分都不会执行。 - Bob Stein

添加和更改动态CSS规则的好答案。 - StefansArya

14

jQuery.css 会查找页面上所有已经存在的带有 Foo 类的元素，并将它们的行内样式 width 设置为 40px。

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

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

- namuol

谢谢您的解释；如果有代码示例会更好。 - wordsforthewise

如果CSS规则是通过ID引用的，例如＃some-id，该怎么办？ - Antonio Ooi

3

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

- AlbertVo

2

您应该使用jQuery选择元素。您知道您选择的不是CSS类本身，对吧？

一旦您有了一个class="Foo"的元素，您可以像您尝试做的那样手动设置css属性，或者您可以使用addClass方法进行添加类，如下所示：

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

当然，因为您选择添加的是相同的类，所以这没有什么意义。

- sophistihip

1

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

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

要获取完整的帮助，请阅读 http://api.jquery.com/css/ 中的 CSS api。

- aked

0

尝试使用多种样式

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

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

- JaredPar

0

这可能适合你。

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

- Shrikantha Budya

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- gilly3 · Accepted Answer

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