使用 JQuery 更改类中的 CSS 规则

Posted 2023-02-22

【中文标题】使用 JQuery 更改类中的 CSS 规则

【英文标题】：Change CSS rule in class using JQuery

【发布时间】：2011-09-01 04:49:25

【问题描述】：

我有一个 CSS 类

.Foo

  width:20px;

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

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

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

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

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

【问题讨论】：

你能看看你的控制台，看看你是否有任何错误？该命令应该工作

【参考方案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

【讨论】：

我发现这个答案很有帮助 - 最终，我最终使用了类似于 for (i in document.styleSheets[0].rules) if (document.styleSheets[0].rules[i].selectorText == ".setThisRule") document.styleSheets[0].rules[i].style.maxWidth = "100px";

@krivar - 什么版本？在当前版本（版本 32.0.1700.72 m）中为我工作。您在 javascript 控制台中看到了哪些错误？

@gilly3 - 错误：未捕获的类型错误：无法读取 null 的属性“样式” - Chromium：版本 31.0.1650.63 (238485) - 操作系统：Manjaro Linux

@krivar - 试试这个：jsfiddle.net/kdp5V/167。这对我来说有点莫名其妙。我的猜测是包含规则的样式表不在您的操作系统中的索引 2 处。如果这个更新的 jsFiddle 对你有用，那将确认它。而且，如果它失败了，它应该默默地失败（如果这样更好的话）。

显然这发生在 Chrome 上：code.google.com/p/chromium/issues/detail?id=49001

【参考方案2】：

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

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

然后在事件中更改它，例如所以：

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

【讨论】：

啊，不错。简单而优雅，正是我想要的——尽管现在我重新阅读了上面的问题，这里可能不是最好的答案。

P.S.我想你的意思是$('head')（不是“标题”）！ :)

这是一种出色的技术，可以编写样式表规则的脚本：因此，如果没有运行的 JavaScript 或 jQuery，那么这两个部分都不会执行。

添加和更改动态 css 规则的好答案

【参考方案3】：

jQuery.css 将查找页面上所有 现有 元素具有 Foo 类，然后将它们的 内联 样式 width 设置为 40px。

换句话说，这不会创建或更改 css 规则——如果你动态添加一个带有 Foo 类的元素，它的宽度仍然是 20px，因为它的内联样式没有已设置为覆盖默认 CSS 规则。

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

【讨论】：

感谢您的解释；一个代码示例会很好。

如果css规则被id引用了怎么办，例如#some-id?

【参考方案4】：

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

【参考方案5】：

您应该使用 jQuery 选择一个元素。您知道您没有选择 CSS 类本身，对吗？

一旦你有了一个 class="Foo" 的元素，你就可以照常选择它，或者像你想要做的那样手动设置 css 属性，或者你可以像这样使用添加类：

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

当然，因为您选择的课程与您要添加的课程相同，所以这没有任何意义。

【参考方案6】：

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

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

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

【参考方案7】：

这可能对你有用。

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

【参考方案8】：

尝试使用多种样式

.FooSmall

  width:20px;

.FooBig

  width:40px;


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