如何使用CSS样式动态创建的元素

Question

我正在尝试制作一个应用程序，它允许我向表格中添加日期。

我有以下代码。

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)
}} 

这对我来说完美地运作，但我还需要为这个应用程序制作一个响应式设计，所以在较小的屏幕上，这些属性太大了。

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

我需要类似于的东西，

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

所以问题在于，这些元素是动态创建的，它们在 HTML 加载时不存在，因此我无法使用 CSS 对它们进行样式设置。是否可以通过 CSS 对这些元素进行样式设置？如果可以，应该如何操作？ 这是在大屏幕上，添加日期按钮会添加1个绿色和10个红色方框 这里也是一样，只不过我希望这些方框更小（与旁边的方框大小相同）

P.S

我已经进入编程冒险的第三周，只熟悉原生JS，所以没有使用任何库/框架。

- Boreka

---

你使用真正的CSS，而不是基于内联属性的样式。请阅读有关通过样式表将CSS规则应用于元素的内容。 - zero298

所以问题在于，这些元素是动态创建的，在HTML加载时不存在，因此无法使用CSS进行样式设置。事实上，无论这些元素何时被DOM准备/加载，浏览器都会呈现CSS。我会为每个新添加的元素添加自定义的CSS类，并编写相应的自定义CSS。 - Nicolae Olariu

请开始使用CSS文件和类。 - Philipp Sander

CSS不在乎它们是否存在于DOM中，只要你的CSS选择器正确，就会对元素进行样式设置。为了使这更有意义，考虑一下“div.style”是一个对象，那么为什么不将它传递给带有你样式的对象，比如“div.style = {width: "20px", height: "20px"}”。 - Raimonds

Answer 1

您可以创建一个类，并将该类添加到创建的元素中。

例如：

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>

- amrender singh

Answer 2

在添加新的DOM节点时，浏览器会执行所谓的重绘节点操作，简单地说就是将CSS重新应用于DOM节点：

动态更改: 浏览器尝试做出最小可能的响应变化的操作。因此，对元素颜色的更改将仅导致元素的重绘。对元素位置的更改将导致元素、其子元素和可能的同级元素的布局和重绘。添加DOM节点将导致节点的布局和重绘。增大“html”元素的字体大小等重大更改将导致缓存无效、重新布局并重绘整个树。

- stevenlacerda

---

谢谢，当我尝试使用CSS样式时，由于某种原因我无法做到，所以我认为无法使用CSS样式来样式化动态创建的元素，现在我再次尝试，它确实可以工作！非常感谢。 - Boreka

这个有 W3C 的来源吗？ - opyate

Answer 3

一定要使用CSS类和媒体查询来实现这个功能

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

然后在一个 css 文件中

.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
   }
}

以下是在我刚开始学习编程时对我非常有帮助的链接：

• 你可能不需要jquery
• Shay Howe的html/css教程

还有为什么要移动优先和媒体查询基础知识

祝你好运并玩得开心！

- Thomas Prince