如何在没有使用JQuery的情况下更改类的样式

Question

如何在没有使用JQuery的情况下更改类的样式

6

假设一个页面中有大约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 }

我想要修改类名为“good”和“bad”的元素的CSS属性“color”的值，而不需要使用迭代的方式来获取这些元素。例如（虚构的）：

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

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

强制性：我不想使用jQuery。

编辑：我需要通过Javascript来完成，或者找到一种改变整个类的属性的方法，使得整个页面都受到改变的影响（我重申，不要对 document.getElementsByClassName("good") 进行迭代）。我的意思是，我不想使用 getElementsByClassName。我希望将 "good" 类的 style 元素的 "color" 改变为 "yellow"，而不是原来的 "green"。我不想改变该类别文档元素的样式，而是想改变该类别的样式。这种可能吗？谢谢你。

- Sampisa

关于您的编辑：“我不想改变文档元素的样式，我想改变类的样式。”：这是可能的，但会导致软件/HTML设计不可预测。我认为您想要实现一些主题/主题切换。如果是这种情况，我建议创建另一个样式表，其中包含所有可变样式。更改样式时，复制该样式表，更改值，然后只需在DOM中更改样式表，而不是单个样式。 - try-catch-finally

1

谢谢，但这不是情况。我正在使用GreaseMonkey编写一个脚本，用于访问一个非常复杂的页面（sic！），其中大约有5000个元素具有与我的示例相同的结构。我不能使用jQuery，原因太长无法解释，并且通过getElementsByClassName更改元素属性真的很慢，但Nenad建议的技巧非常完美：立即执行，无需等待3-4秒钟才能运行脚本。 - Sampisa

3个回答

1

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

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

- Mohammed Elhag

0

我想这就是你想要的

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

- felipecamposclarke

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Nenad Vracar · Accepted Answer

您可以使用getElementsByClassName()，但您必须循环遍历HTMLCollection。演示

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>