javascript - 用 JavaScript 或 jQuery 修改 CSS 规则？

Question

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

.red {
    color: red;
}

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

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

.red {
    color: blue;
}

因此它也会影响同一类的 future 实例。 (第 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>