jQuery CSS:动态更改类的属性

Question

我想更改一个类的属性,在该类的属性中,所有使用该类的元素将用于其余的Web应用程序生命周期(从使用开始直到用户退出Web应用程序)将受到影响.

HTML:

<p class="myClass">
    What?
</p>
<p class="myClass">
    Now?
</p>

CSS:

.myClass{
    background-color: #ffff00;    
}

JS:

$(".myClass").css("background-color", "#00FFFF");
$("p").last().after("<div class='myClass'>Now!</div>");

这是一个例子

我想从示例中实现的是,所有后续动态添加的myClass都将具有new属性.从jsFiddle中,您将看到下一个添加的元素没有新属性.

更多:

我只是使用颜色作为基础,我将以更大的规模实现它,我想要完成的是动态更改将用于整个Web应用程序生命周期的类的属性.

Answer 1

我只是偶然发现了这个问题,并认为我会插话,即使它已经快一年了......

实际上,您可以在运行时动态修改css规则,就像任何其他DOM元素一样.我不认为jQuery支持它,因此您需要直接使用本机DOM元素.

您可以将样式标题分配给样式表,以便在DOM树中更容易找到它们,但是通过一些预先考虑,找到您想要的规则通常并不困难.以下是基于您的示例的jsfiddle的快速示例.

function getStyleRule(name) {
  for(var i=0; i<document.styleSheets.length; i++) {
    var ix, sheet = document.styleSheets[i];
    for (ix=0; ix<sheet.cssRules.length; ix++) {
        if (sheet.cssRules[ix].selectorText === name)
            return sheet.cssRules[ix].style;
    }
  }
return null;
}

var rule = getStyleRule('.myClass');
rule.backgroundColor = '#0ff';

$("p").last().after("<div class='myClass'>Now!</div>");

这是一个小提示,显示您的示例,更新以修改css规则本身:http: //jsfiddle.net/93wGJ/5/

有关样式表DOM的更多信息,请查看http://www.w3.org/TR/DOM-Level-2-Style/stylesheets.html

Answer 2

使用css()方法更改现有元素的内联样式,并且不能使用它来更改未来元素的样式.解决方法(我不太喜欢)将插入样式标记:

$( "<style>.myClass {background-color : #00FFFF}</style>" ).appendTo( "head" )
$("p").last().after("<div class='myClass'>Now!</div>");

小提琴

Answer 3

尝试将颜色更改添加到函数中:

function colorChange() {
     $(".myClass").css("background-color", "#00FFFF");
}

并在使用jQuery更改内容之后将其称为"on load".