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 }

我想改变css＆＃34; color＆＃34;课程的价值＆＃34;好＆＃34;并且＆＃34;坏＆＃34;没有迭代getElementsByClassName。例如。类似（发明）的东西

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

我没有找到任何改变类定义的方法，以便让所有标记有该类的标签改变样式：它是否存在？可能吗？

强制性：我{不想要，不能使用jQuery。

编辑：我需要通过Javascript来完成，或者找到一种方法来更改整个班级的属性，以便整个页面受到同时更改的影响 （我重复一遍，没有遍历document.getElementsByClassName（＆＃34; good＆＃34;））。我的意思是，我不想使用getElementsByClassName。我想要那种风格元素＆＃34; color＆＃34;为了上课而改变了＃34;好＆＃34;所以＆＃34;好＆＃34;班级有颜色＆＃34;黄色＆＃34;而不是＆＃34;绿色＆＃34;。我不想用该类改变文档元素的样式，我想改变类的风格。可能吗？谢谢

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]

＆＃13;

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');

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

使用 CSS选择器是另一种重要方式。

访问此链接http://www.w3schools.com/cssref/css_selectors.asp

Answer 3

我认为这就是你想要的

elements = document.getElementsByClassName("god");
for(i=0; i<elements.length; i++) {
  elements[i].className += " bad";
}

如何在没有JQuery的情况下改变类的样式

3 个答案: