javascript - 如何在没有 JQuery 的情况下更改类的样式

Question

假设像这样的页面中有大约 2000 个元素

<div class="good">fruit</div>
<div class="bad">stone</div>
<div class="bad">sand</div>
<div class="good">water</div>
<div class="good">carrot</div>

风格是

.good { color: green }
.bad  { color: red }

我想在不迭代 getElementsByClassName 的情况下更改类“好”和“坏”的 css“颜色”值。例如。类似(发明)的东西

document.class["good"].style.color="yellow"

我没有找到任何方法来更改类定义以使所有标有该类的标签更改样式:它存在吗？是否可以？

强制:我{不想，不能}使用 jQuery。

编辑:我需要通过 Javascript 来完成，或者找到一种方法来更改整个类的属性，以便整个页面同时受到更改的影响(我重复一遍，没有迭代 document.getElementsByClassName("good"))。我的意思是，我不想使用 getElementsByClassName。我希望为类“good”更改样式元素“color”，以便“good”类的颜色为“yellow”而不是“green”。我不想用那个类更改文档元素的样式，我想更改类的样式。是否可以？谢谢

Answer 1

您可以使用 getElementsByClassName() 但是您必须循环 HTMLCollection DEMO

var good = document.getElementsByClassName('good');
for (var i = 0; i < good.length; i++) {
  good[i].style.color = 'yellow';
}

更新:您可以使用 Document.styleSheets 更改 css class就是这样。注意:您需要找到正确的 css 文件编号，在此演示中它是 [0]

var changeStyle = function(selector, prop, value) {
  var style = document.styleSheets[0].cssRules || document.styleSheets[0].rules;
  for (var i = 0; i < style.length; i++) {
    if (style[i].selectorText == selector) {
      style[i].style[prop] = value;
    }
  }
}

changeStyle('.good', 'color', 'purple');
changeStyle('.bad', 'color', 'yellow');

.good { color: green }
.bad  { color: red }

<div class="good">fruit</div>
<div class="bad">stone</div>
<div class="bad">sand</div>
<div class="good">water</div>
<div class="good">carrot</div>