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>");

Here is a sample

我想从示例中实现的是，所有后续动态添加的myClass都将具有新属性。从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>");

FIDDLE

Answer 3

尝试在功能中添加颜色：

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

并在负载＆＃34;上调用它＃34;在你用jQuery改变了一些东西之后。

Answer 4

我会做类似下面的事情。它不会修改类，但它可以满足您的需要。

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

和css：

.myClass{
    background-color: #ffff00;    
}
.updatedClass .myClass {
    background-color: #00FFFF;    
}

Demo

在任何情况下，如果要为任何页面启用此功能，则应在涉及服务器的情况下执行此操作。例如，通过将某个变量设置为会话而不是基于该变量返回相应的css。

或者您可以使用cookie（检查jquery cookies插件以便在客户端更简单地访问cookie）并使用插入样式标记修改类，或者在jQuery.ready回调中将相应的类添加到body。

例如，使用cookies（使用上面提到的插件）代码可能是这样的：

$("body").addClass("updatedClass");
$("p").last().after("<div class='myClass'>Now!</div>");
$.cookie('baseClass', 'updatedClass'); // set class for current session (this cookie will be deleted after user ends his session)

并且，每个页面都应该：

$(function() {
   if($.cookie('baseClass') != null) {
        $("body").addClass($.cookie('baseClass'));// or style tag could be added here instead.
   }
})

Answer 5

试试这个：http://jsfiddle.net/tRqBV/5/

$(function () {
   $(".myClass").css("background", "green");
   $("p").last().after("<div class='myClass'>Now!</div>");

   $(document).ready(function () {
    $('div.myClass').css("background", $('p.myClass').first().css('background-color'));
   });
});

Answer 6

我有同样的目标，我使用哈希+ ajax导航记录集，我希望能够轻松保存记录集的查看首选项。（如果用户喜欢使用链接导航记录，或者如果用户选择则不可见，我想要可移动的链接。）

DaveInMaine's答案很棒，但我担心向后兼容性，所以我努力寻找一个简单的解决方案。

通过命名我的表，一个静态元素recordTable，给它一个LinksOn类，我可以使用样式选择器，如#recordTable.LinksOn a和#recordTable.LinksOff a，显示设置为没有，并使用像

这样的简单javascript

javascript:$('#recordTable').toggleClass('LinksOn').toggleClass('LinksOff');

通过ajax或localStorage将最后一个类存储在cookie中的变量，服务器端会话中，如果我喜欢，我可以在会话之间保存它。

我可以使用一个班级#recordtable和#recordtable.on，而不是on和off来完成这一切，但我选择以这种方式存储。< / p>

Answer 7

除了已经说过的内容之外，我认为修改css规则是没用的，因为现有的元素不会被修改。

<style>
.myclass{
font-size:25px;
}
</style>

<div class="myclass">I am here </div>

现在，如果你以某种方式修改了课程＆＃34; myclass＆＃34; itselef，它不会影响＆＃34;我在这里＆＃34;，因为它没有动态绑定。也许它会影响新创建的元素。

jQuery CSS：动态更改类的属性

7 个答案: