Manipulating style with getElementsByClassName

Question

I don\'t understand why I cannot manipulate the style of .special in my code. I\'m sure it\'s something simple, but it\'s not working.

I am an h1!<         


        

Answer 1

Use the for of statement to iterate the collection you get back.

for (const s of document.getElementsByClassName("special")) {
  s.style.color = "blue";
}

---

And I would personally use querySelectorAll instead, since it's more general purpose, and can fetch by class just as easily.

for (const s of document.querySelectorAll(".special")) {
  s.style.color = "blue";
}

---

Lastly, if all .special classes should get that style, it would seem like you could just add it to your CSS instead.

.special {
  color: blue;
}

This will depend on other logic that you may have not included in the question though. Even then, you may be able to get away with adding another class, maybe even to some ancestor element.