jQuery CSS：动态更改类的属性答案

【问题标题】：jQuery CSS: Dynamically change attributes of a classjQuery CSS：动态更改类的属性
【发布时间】：2013-01-23 10:45:15
【问题描述】：

我想更改一个类的属性，在该类的其余 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 应用生命周期的类的属性。

【问题讨论】：

它是如何工作的。 jQuery 将只替换它可以看到的元素。您可以将颜色更改放入函数中并在需要时调用它，因此如果您决定更改某些内容 - 您只需编辑一个位置。
大量重复：stackoverflow.com/search?q=[jquery]+change+css+rule.
“整个网络应用生命周期”是什么意思？
根据我上面的定义，（从开始使用到用户退出网络应用）
@Marl 查看我的回答。我添加了如何让样式设置在页面之间移动。

标签： jquery css

【解决方案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

【讨论】：

在我的 chrome 中不起作用，出现错误“无法读取 null 的属性‘长度’”。无论如何不应该与 IE 非常兼容 (stackoverflow.com/a/3164861/1905229);
getStyleRule 应该从最近加载的样式表类到最旧的类进行搜索。所以如果有一个类定义了很多次，它会修改最后加载的类定义。在代码中 i 和 ix 应该递减。

【解决方案2】：

使用 css() 方法可以更改现有元素的内联样式，您不能使用它来更改未来元素的样式。一种解决方法（我不太喜欢）是插入样式标签：

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

FIDDLE

【讨论】：

这解决了我的问题，但如果存在该答案，我想要一个更干净的问题。如果没有，我将执行此操作。 ~_~
不确定你所说的更干净是什么意思，更 jQuery 的方式是$('<style />', {text: '.myClass {background-color : #00FFFF}'}).appendTo( "head" );，改变样式的 javascript 方法是内联的，因此只在现有元素上，所以唯一的应用方法持续“永远”的样式是在头部使用样式标签。
有什么方法可以清理添加的旧标签吗？所以它不会变得混乱？
@JackFairfield - 你可以像任何其他标签一样删除样式标签，但你必须找到一种方法来定位这些标签，并确保它们在删除它们之前只包含更改的样式等. 大多数时候，离开它们就可以了。

【解决方案3】：

尝试将颜色变化放入函数中：

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

在你用 jQuery 改变一些东西之后，称之为“加载时”。

【讨论】：

【解决方案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 回调中将相应的类添加到主体来修改类。

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

$("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.
   }
})

【讨论】：

【解决方案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'));
   });
});

【讨论】：

【解决方案6】：

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

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

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

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

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

我可以用一个类（#recordtable 和 #recordtable.on，而不是 on 和 off）来完成这一切，但我选择以这种方式存储它。

【讨论】：

【解决方案7】：

除了上面所说的，我认为修改一个css规则是没有用的，因为已经存在的元素不会被修改。

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

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

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

【讨论】：