Question

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

.red {
    color: red;
}

我有10个元素使用该类。

我喜欢做的是编辑这样的课程：

.red {
    color: blue;
}

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

Answer 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>

Answer 2

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

但是，如前所述，这可能不是您尝试实现的正确方法。它可能有点浏览器，只是感觉很讨厌。

你最好有2个单独的规则

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

在你的javascript中维护一个变量，它保存你元素的当前默认类，即。 current_class ='blue'。当你简单地创建一个元素.addClass（current_class）。当你想要改变所有元素时，.toggleClass（current_class，new_class）。

Answer 3

对我来说，你可以这样做：

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

Answer 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。

Answer 5

我相信jQuery .css（）正是您所寻找的。

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

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

使用JavaScript或jQuery修改CSS规则？

5 个答案: