如何在没有 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（“好”）我再说一遍，没有重复）。我的意思是，我不想使用 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';
}

更新：您可以更改 css class，Document.styleSheets这就是方法。注意：您需要找到正确的 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>