Change multiple elements style with JavaScript

Question

I need to change the style of multiple buttons with JavaScript.

I tried giving them all an ID and change it this way:

document.getElementById('button').style.color = "#ff0000";

But this of course only changed the first.

I could give them all different IDs but there are over 150 of them and that would get cumbersome.

How can I change them all?

Well you have to use different IDs. Or, give them all a class. — user663031
– user663031, Commented Feb 5, 2015 at 4:46
You can't have multiple identical IDs. Give them a class, and then apply the change to the class. — sideroxylon
– sideroxylon, Commented Feb 5, 2015 at 4:47

Gilsha · Accepted Answer · 2015-02-05 04:47:39Z

2

Use a common class name to all buttons and apply text styles as shown in code below.

var x = document.getElementsByClassName("btn");
for (var i = 0; i < x.length; i++) {
    x[i].style.color = "#ff0000";
}

Or give a common class name to all buttons and apply the styles using css.

.btn{
   color : #ff0000;
}

answered Feb 5, 2015 at 4:47

Gilsha

14.6k3 gold badges36 silver badges48 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Dasun Karawita · Accepted Answer · 2023-06-20 02:11:48Z

 var selector = document.querySelectorAll(".ecard");

Using above we can call to all the elements with class = "ecard".
"querySelectorAll" can select many elements at once.
Replace "selector" with any term you like.
Replace "ecard" with the ID or CLASS of respective set of elements.

Note : We use "#" in front of a term if it is ID, and "." in front of a term if it is CLASS.

for (let index = 0; index < ec.length; index++) {
        const ecc = selector[index];
        ecc.style.backgroundColor = "#10141E"
    }

Using above code we create a loop which end after changing the background color of all the elements. In here javascript only runs above if the respective number of elements set of elements should greater than 0

Replace "selector" terms on above code, with term you used to replace term : selector, in first code I mentioned
Replace "ecc" with any term you like., and use that term to change style of multiple element

Thanks !

Collectives™ on Stack Overflow

Change multiple elements style with JavaScript

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related