使用 JavaScript 或 jQuery 修改 CSS 规则

Modify CSS rules with JavaScript or jQuery?

本文关键字：CSS 规则 修改 jQuery JavaScript 使用      更新时间：2023-09-26

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

.red {
    color: red;
}

我有 10 个元素使用这个类。

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

.red {
    color: blue;
}

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

这就是使用 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>

Javascript提供了document.stylesheet集合，该集合提供了CSSStyleSheet对象的列表。 您可以遍历此集合以查找您感兴趣的任何特定 css 规则并修改其规则。

但是，正如在我之前提到的，这可能不是您要实现的目标的正确方法。 它可能有点浏览器不足，只是感觉很黑客。

你最好有 2 个单独的规则 

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

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

在我看来，

你可以这样做：

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

你的问题似乎是对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即可。

我相信jQuery .css（）就是你要找的。 

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

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

相关文章：