How to style dynamically created elements with CSS

Question

I'm trying to make an APP, which allows me to add days to a table

I have the following Code

function addDay() {

for (k = 1; k < 11; k++) {
    let div = document.createElement("div");
    div.style.background = "red"
    div.style.color = "white"
    div.style.width = "40px"
    div.style.height = "20px"
    div.style.margin = "0.5px"
    div.style.textAlign = "center"
    div.style.borderRadius = "6px"
    div.setAttribute("class", "studentGrades")
    // div.setAttribute("class", "sgID" + k)
    div.className += " sgID" + k
    div.setAttribute("onclick", "averageFunc(this, Number(prompt('Please, enter number here')))");

    div.innerHTML = "0"

    document.querySelector("#container3").appendChild(div)
}}

This works perfectly fine for me, But I also have to make a Responsive design for this app, so on a smaller screen,

These properties are too big,

    div.style.width = "40px"
    div.style.height = "20px"

I need something like ,

    div.style.width = "20px"
    div.style.height = "10px"

So here is the problem, These elements are dynamically created, They are not present when HTML is loaded, So I can't style them with CSS, Is it Possible to style those elements via CSS? And if yes how?

This is on a big screen, Add day button adds 1 green and 10 red boxes

Same here, except i want those boxes to be smaller (same size as the boxes next to it)

P.S

I'm into a 3rd week of my coding adventure, I'm familiar with only Vanilla JS, So no Library/Framework's.

You use actual CSS, not inline, attribute-based styling. Read about applying CSS rules to elements through [style sheets](https://developer.mozilla.org/en-US/docs/Web/CSS). — zero298, Jul 13 '18 at 14:44
*So here is the problem, These elements are dynamically created, They are not present when HTML is loaded, So I can't style them with CSS* => it doesn't matter if they're present or not whem DOM is ready/loaded, CSS gets rendered by browser anyway. I'd add custom CSS classes for every new element added and write custom CSS for it. — Nicolae Olariu, Jul 13 '18 at 14:45
css doesn't care if they are in dom or not, if you have your css selector correct it will style element. To make this even more meaningful consider this "div.style" is object, so why don't pass it object with your styles like "div.style = {width: "20px", height: "20px"}" — Raimonds, Jul 13 '18 at 15:17

amrender singh · Answer 1 · 2018-07-13T15:08:16.350

You can make a class and add that class to created elemets.

Example:

for (k = 1; k < 11; k++) {
    let div = document.createElement("div");
    div.setAttribute("onclick", "averageFunc(this, Number(prompt('Please, enter number here')))");
    div.className = 'custom-class';
    div.innerHTML = "0"
    document.getElementById("container3").appendChild(div)
}

.custom-class {
  background : red;
  color: white;
  width : 20px;
  height : 20px;
  margin-top :2px;
  text-align : center;
  border : 1px solid black;
}

<div id="container3"></div>

score 0 · Answer 2 · answered Jul 13 '18 at 14:57

0

When adding a new DOM node, the browser will do what's called repaint the node, simply meaning it will reapply css to the DOM node:

Dynamic changes The browsers try to do the minimal possible actions in response to a change. So changes to an element's color will cause only repaint of the element. Changes to the element position will cause layout and repaint of the element, its children and possibly siblings. Adding a DOM node will cause layout and repaint of the node. Major changes, like increasing font size of the "html" element, will cause invalidation of caches, relayout and repaint of the entire tree.

answered Jul 13 '18 at 14:57

stevenlacerda

1,187
2
9
21

Thanks, when i tried styling via CSS i couldn't do it, for some reason, so i thought it was impossible to style dynamically created elements with CSS, I tried again now and it indeed did work! Thanks alot. – Boreka Jul 13 '18 at 14:59
Is there a W3C source for this? – opyate Jun 09 '21 at 08:34

Thomas Prince · Answer 3 · 2018-07-13T15:05:20.090

Absolutely use a css class and a media query for this

let div = document.createElement("div");
// could abstract this to an addClass func for reuse
if (div.classList)
  div.classList.add('sweet-class-name');
else
  div.className += ' ' + 'sweet-class-name';
// the rest of your func

Then in a css file

.sweet-class-name {
    ... all your default styles. I usually make mobile styles my defaults
}

@media screen and (min-width : 768px) {
   .sweet-class-name {
     // styles for screens bigger than 768px
   }
}

useful links that helped me a lot when I was starting out

And also why mobile first and media query basics

Good luck and have fun!

How to style dynamically created elements with CSS

3 Answers3

Linked

Related