Change a Style of all Elements with a specific Class in JS

# Change a Style of all Elements with a specific Class in JS

To change the styles of all elements with a specific class:

Use the querySelectorAll() method to get a collection of the elements with the specific class.
Use the forEach() method to iterate over the collection.
On each iteration, use the style object to change the element's styles.

Here is the HTML for the examples.

index.html

Copied!
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>bobbyhadz.com</title>
    <meta charset="UTF-8" />

    <style>
      .box {
        background-color: salmon;
        color: white;
        width: 150px;
        height: 150px;
        margin: 10px;
      }
    </style>
  </head>

  <body>
    <div class="box">Box content 1</div>
    <div class="box">Box content 2</div>
    <div class="box">Box content 3</div>

    <script src="index.js"></script>
  </body>
</html>

And here is the related JavaScript code.

index.js

Copied!
const boxes = document.querySelectorAll('.box');

boxes.forEach(box => {
  box.style.backgroundColor = 'purple';
  box.style.width = '300px';
});

change style of all elements with specific class

We used the document.querySelectorAll method to select all DOM elements with a class of box.

The querySelectorAll method returns a NodeList containing the elements that match the selector.

The function we passed to the NodeList.forEach method gets called with each element in the NodeList.

On each iteration, we set properties on the element's style object to update its styles.

index.js

Copied!
const boxes = document.querySelectorAll('.box');

boxes.forEach(box => {
  box.style.backgroundColor = 'purple';
  box.style.width = '300px';
});

Note that multi-word properties like background color are camel-cased when accessed on the style object.

# Change a style of all Elements with a specific Class using getElementsByClassName

You could also use the document.getElementsByClassName method to select the elements with the specific class.

However, the method returns an HTMLCollection.

Make sure to convert the HTMLCollection to an array before calling the forEach() method.

index.js

Copied!
const boxes = Array.from(
  document.getElementsByClassName('box')
);

boxes.forEach(box => {
  box.style.backgroundColor = 'purple';
  box.style.width = '300px';
});

The code snippet achieves the same result by using the getElementsByClassName() method.

We used the Array.from method to convert the HTMLCollection to an array before calling the forEach method.

If I open my browser, I can see that the inline styles have been successfully applied to all elements with the class of box.

styles applied to elements with class

Alternatively, you can iterate over the HTMLCollection directly without converting it to an array by using a for...of loop.

index.js

Copied!
const boxes = document.getElementsByClassName('box');

for (const box of boxes) {
  box.style.backgroundColor = 'purple';
  box.style.width = '300px';
}

The for...of statement is used to loop over iterable objects like arrays, strings, Map, Set and NodeList objects and generators.

# Additional Resources

You can learn more about the related topics by checking out the following tutorials:

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.

You can use the search field on my Home Page to filter through all of my articles.

Change a Style of all Elements with a specific Class in JS