jQuery CSS:动态更改类的属性

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

HTML:

What?

Now?

CSS:

 .myClass{ background-color: #ffff00; } 

JS:

 $(".myClass").css("background-color", "#00FFFF"); $("p").last().after("
Now!
");

这是一个样本

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

更多:

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

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

 $( "" ).appendTo( "head" ) $("p").last().after("
Now!
");

小提琴

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

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

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

 function getStyleRule(name) { for(var i=0; iNow!
");

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

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

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

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

并在使用jQuery更改内容后将其称为“on load”。

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

 $("body").addClass("updatedClass"); $("p").last().after("
Now!
");

和css:

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

演示

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

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

例如,使用cookies(使用上面提到的插件)代码可能是这样的:

 $("body").addClass("updatedClass"); $("p").last().after("
Now!
"); $.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. } }) 

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

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

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

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

通过命名我的表,一个静态元素, recordTable ,给它一个LinksOn类,我可以使用样式选择器,如#recordTable.LinksOn a#recordTable.LinksOff a ,显示设置为none,并使用简单的javascript

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

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

我可以用一个类( #recordtable#recordtable.on ,而不是onoff )来完成所有这些,但我选择以这种方式存储它。

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

  
I am here

现在,如果你以某种方式修改类“myclass”itselef,它不会影响“我在这里”,因为它不是动态绑定的。 也许它会影响新创建的元素。