使用JQuery在类中更改CSS规则

2018-06-05 08:24:00

我有一个CSS类

.Foo
{
  width:20px;
}

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

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

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

编辑：我想出了我的问题。这个命令确实有效。在我的特殊应用程序中，我没有在使用该命令之前使用该类创建元素，所以创建它们时什么都不改变。

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

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

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

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

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

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

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

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

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

链接地址: http://www.djcxy.com/p/16993.html

上一篇: Change CSS rule in class using JQuery

下一篇: How do I unset an element's CSS attribute using jQuery?