Changing fontSize for a class using Javascript

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>

How do I select all occurrences of class .release-4 and change the text-size to 2em using Javascript?

I've tried this:

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

but that doesn't work.

This does work:

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

but it only selects the first occurrence of .release-4.

Answer 1

getElementsByClassName() method returns a collection of elements. You should loop through them and set the necessary font value for each element individually.