How can i add css to the dynamically created elements in javascript?

Hello Folks,
What i am trying to do is that i am creating buttons dynamically through javascript and setting their values, id and classes dynamically in my web application and what i want to do is that i want to assign different colors according to some conditions that i will give , to those different buttons with same class name but different id created, So if anyone has any idea on how to accomplish that it will be very helpful.

it would help to know if you are doing this with just vanilla javascript or if you are using a library like react?

With just vanilla javascript!!

do you have some code already written? If not, that is fine. It may just be more helpful if I could see what direction you have taken already.

It’s hard to give specific advice without specific code. You can define the classes in a stylesheet and add class-based colors that way. If you need to update the style of a specific item using JavaScript and can’t use CSS for it, then you can use the style property. There are some examples of how to do this online, but here is the W3 Schools one

Yeah sure. I will be sharing the code with you

1 Like
 for (let j = 0; j < value2.length; j++) {
						var res_number = value2[j];
						input1[j] = document.createElement("button");
						input1[j].value = mob_no;
						input1[j].innerHTML = mob_no;
                               if(cond1){ css}
                               else if(cond2){css2}
                         var p = "" + mob_no;
						input1[j].addEventListener('click', function(p) {
                                return function () {
						}(p), false);
						document.getElementById("User_data" + key2).appendChild(input1[j]);

This is the code where i want to insert the css.I am sorry but i could share only this much, if there is any method that i can apply cause whatever ways i can find are either using id or need class.

some code will be helpfull for help you.
The thing is you already know the ID’s? if yes, use the css stylesheet, but I guess those are dinamically created so this won’t help you.

Best way for me is just add classes for every change on css you need, then just add that class conditionally to the element.

Set the class:
element.className = "your_class"
Get the class:
add new class:
element.classList.add("class name")

If these don’t work for you, you can add styles with the style object or css function. This guide explains very well both:

1 Like

I just have an idea, i could make different classes according to the different conditions i have and then add css externally to those classes, hope that works :smiley: . I am just learning so i am open to more great suggestions from this awesome community, you guys are great this is my first post and felt really good that such great folks are helping out!!
Please if any of you have more ideas do share!!

I have uploaded the code here, applied these things but they will be same for each button and can’t use id’s as i want to create the css for buttons while dynamically creating the buttons

Yes you can, thats my preferred way to do this. But I’m not javascript pro so, maybe there are other ways. To swap between 2 classes you can use something like this:

// ternary operator works like an if/else statement
let myClass = (condition here) ? 'class1' : 'class2'
// ......
element.className = myClass
1 Like

forgot to mention, then add the classes to your stylesheet

1 Like