用 JavaScript 或 jQuery 修改 CSS 规则？答案

【问题标题】：Modify CSS rules with JavaScript or jQuery?用 JavaScript 或 jQuery 修改 CSS 规则？
【发布时间】：2015-06-09 14:44:15
【问题描述】：

是否可以使用 javascript 或 jquery 编辑/修改现有的 css 规则？例如，样式表有这个类：

.red {
    color: red;
}

我有 10 个元素使用该类。

我想做的是像这样编辑类：

.red {
    color: blue;
}

这样它也会影响同一类的未来实例。（第 11、12、13 个元素等）。

【问题讨论】：

stackoverflow.com/questions/13075920/…
是否需要编辑style元素文本？ , link 元素 href 样式表？
@chipChocolate.py 问这个毫无意义。
@rocky 该解决方案只允许我使用添加新样式——并不能真正回答我的问题（我需要修改现有规则）
@guest271314 什么意思？

标签： javascript jquery html css

【解决方案1】：

这是您使用 JavaScript 更改 CSS 规则的方式。

var ss = document.styleSheets;
var m = document.getElementById('modifiedRule');

for (i = 0; i < ss.length; i++) {
  var rules = ss[i];
  for (j = 0; j < rules.cssRules.length; j++) {
    var r = rules.cssRules[j];
    if (r.selectorText == ".red") {
      m.innerHTML = "<br />Old rule: " + r.cssText;
      r.style.color = "blue";
      m.innerHTML += "<br />Modified rule: " + r.cssText;
    }
  }
}

.red {
  color: red;
}

<div class="red">Text</div>
<div class="red">Text</div>
<div class="red">Text</div>
<div class="red">Text</div>
<div class="red">Text</div>
<div class="red">Text</div>
<div class="red">Text</div>
<div id="modifiedRule"></div>

【讨论】：

【解决方案2】：

Javascript 提供了 document.stylesheets 集合，该集合提供了CSSStyleSheet 对象的列表。你可以遍历这个集合找到任何你感兴趣的特定css规则并修改它的规则。

但是，正如我之前提到的，对于您要实现的目标，这可能不是正确的方法。它可能有点依赖浏览器，感觉很hacky。

最好有两条单独的规则

.red { color :red }
.blue { color : blue }

在您的 javascript 中维护一个变量，该变量保存您的元素的当前默认类，即。 current_class= '蓝色'。当您创建一个元素时，只需 .addClass(current_class)。当你想改变所有元素时，.toggleClass(current_class, new_class)。

【讨论】：

【解决方案3】：

在我看来你可以这样做：

var reds = $('.red');
var index = 1;
reds.each(function(){
    $(this).css('color', index > 10 ? 'blue' : 'red');
    index++;
})

【讨论】：

处理器非常密集。 CSS 很简单。

【解决方案4】：

在我看来，您的问题像是对 CSS 的滥用（无论您是否为您的特定问题找到可行的解决方案）。

我会这样处理：

.red .myElementClass{ /*or perhaps .red>.myElementClass*/
    color:red;
}
.blue .myElementClass{ /*or perhaps .blue>.myElementClass*/
    color:blue;
}

<div id="outer" class="red">
    <div class="myElementClass">foo</div>
    <div class="myElementClass">foo</div>
    <div class="myElementClass">foo</div>
    <div class="myElementClass">foo</div>
    <div class="myElementClass">foo</div>
    <div class="myElementClass">foo</div>
</div>

现在您可以根据需要添加任意数量，并更改所有颜色，只需将 div#outer 的类交换为 blue。

【讨论】：

@Zettam：尽管投了反对票，但我坚持认为你正在落入XY problem，你应该重新考虑在运行时更改 CSS 规则的策略。这不是 CSS 的设计用途。节省一些时间并以更传统的方式解决您的问题。
我正要回答自己并提出相同的建议。使用两个类并在 JS 中交换它们。 jQuery 让这一切变得简单：$('#outer').toggleClass('red', 'blue');

【解决方案5】：

我相信 jQuery .css() 是您正在寻找的。

$('.red').css('color', 'blue');

http://api.jquery.com/css/

【讨论】：

这不是我想要的，因为它只是一个选择器（不会影响该项目的未来副本）。
Zettlam：这确实是您问题的正确答案。但是，您的回答清楚地表明问题不完整。因此，这肯定是一个XY problem，就像上面解释的@spender。