How to style dynamically created elements with CSS

问题

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.

回答1:

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>

回答2:

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.

回答3:

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