Is there a way to modify Style Properties in JavaScript by targeting elements with a specific class name using document.getElementsByClassName("Class_Name")?

Question

Is there a way to modify Style Properties in JavaScript by targeting elements with a specific class name using document.getElementsByClassName("Class_Name")?

I am seeking a solution to change the background color of multiple div boxes with the class name "flex-items" using JavaScript. Below is my current code:

function changeColor(){
    document.getElementsByClassName("flex-items").style.backgroundColor = "blue";
}

The function changeColor() is triggered by an onclick event from a button.

<button onclick="changeColor()">Change Color</button>

Is there a way to modify this code so that all the div boxes with the class name "flex-items" change their background color simultaneously with a single click?

javascript html css

Answer 1

Answer №1

Simply add them to a list and iterate over it.

window.updateColors = function() { 
    var elements = document.getElementsByClassName('element');
    for(var j in elements) elements[j].style.backgroundColor = 'blue'; 
}

https://jsfiddle.net/example/69syLdg1/

Answer 2

Simply add them to a list and iterate over it.

window.updateColors = function() { 
    var elements = document.getElementsByClassName('element');
    for(var j in elements) elements[j].style.backgroundColor = 'blue'; 
}

https://jsfiddle.net/example/69syLdg1/

Is there a way to modify Style Properties in JavaScript by targeting elements with a specific class name using document.getElementsByClassName("Class_Name")?

Answer №1

Similar questions

Link components in Next.js now automatically add the current path when working with nested dynamic routes, making it

What could be causing the issue of node-sass generated CSS files not loading on the initial GET request?

Display two examples from the material-ui documentation

Tips for troubleshooting Grunt in PHPStorm (or WebStorm)

Retrieving information from MongoDB to populate the Redux store

What is the best way to align these two divs centrally within a container set to display as inline-block?

Placing 2 elements next to each other - Where the left element remains static and the right element's width increases as the page expands

Completion of the form within the Bootstrap popover

Calculating the computed width based on flex-basis at 0% and the flex-grow factor: what's the deal

Utilizing Jquery tabs for consistent height display

Encountering an undefined error while attempting to retrieve an object from an array by index in Angular

Create a custom hook that encapsulates the useQuery function from tRPC and provides accurate TypeScript typings

Can a div be relocated within another div based on a random roll of the dice?

Is there a way in vee-validate to validate specific sections of a form?

The instance does not have a defined "key" property or method in this Vue/Laravel application

Adjust the position of an image in both the x and y axes based on the mouse hover location using jQuery

What is the best way to convert my MySQL data into JSON in a specific format?

Tips for incorporating if-else statements into your code

The initial value in useEffect is not being updated by useState

Save hyperlinks provided by users within the text