使用JavaScript一次将CSS更改应用于整个类

Question

我想使用JavaScript对类中的所有元素进行更改。

目前它看起来像这样：

var elements = document.getElementsByClassName(classToChange);

for (var i = 0; i < elements.length; i++) {
    elements[i].style.fontFamily = newFont;
}

我的问题是，有没有办法将新的CSS属性同时应用于整个类（没有制作新的CSS样式规则），还是只能通过单独循环遍历元素来完成？

Answer 1

您可以使用Javascript更改或添加新的CSS规则

var style = document.styleSheets[0].cssRules || document.styleSheets[0].rules;
for (var i = 0; i < style.length; i++) {
  if (style[i].selectorText == '.classToChange') {
    style[i].style['font-size'] = '50px';
  }
}

.classToChange {
  color: blue;
}

<p class="classToChange">Lorem</p>