使用Javascript更改类的fontSize

Question

<div id="release-0">
  <p class="release-4"> Here is some text, add a class "done" to the parent div</p>
</div>

<div id="release-1">
  <p>remove the #release-1 div</p>
</div>

<h1>Change this text to finish release 2</h1>

<div id="release-3">
  <p class="release-4"> add CSS to this div</p>
</div>

如何选择所有出现的类.release-4并使用Javascript将text-size更改为2em？

我试过这个：

document.getElementsByClassName("release-4").style.fontSize = "2em";

但这不管用。

这样做是可行的：

document.getElementsByClassName("release-4")[0].style.fontSize = "2em";

但它只选择了.release-4的第一次出现。

Answer 1

getElementsByClassName()方法返回元素集合。您应该循环遍历它们，并为每个元素分别设置必要的字体值。

Answer 2

您需要遍历由NodeList返回的.getElementsByClassName()，并将您的更改应用于每个元素。

var elements = document.getElementsByClassName('release-4');

for (var i = 0; i < elements.length; i++) {
  var element = elements[i];
  element.style.fontSize = "2em";
}

Answer 3

您可以使用querySelectorAll选择哪个类，然后循环返回的集合，下面是一个示例：

var el = document.querySelectorAll(".release-4");
for ( var i = 0; i < el.length; i ++ ) {
    el[i].style.fontSize = "2em";
}

http://jsfiddle.net/9px6LyLp/