Question

我正在尝试制作一个APP，这使我可以在表格中添加天数

我有以下代码

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设置这些元素的样式？如果是的话，怎么办？

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)

PS

我进入了编码冒险的第三周，我只熟悉Vanilla JS，所以不熟悉图书馆/框架。

Answer 1

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

示例：

{
  "demo_Profile": {
    "sex": "male",
    "age": 98,
    "height": 160,
    "weight": 139,
    "bmi": 5,
    "someinfo1": [
      "some_more_info1"
    ],
    "someinfo2": [
      "some_more_inf2"
    ],
    "someinfo3": [
      "some_more_info3"
    ],
  },
  "event": {
    "info_personal": {
      "info1": 219.59,
      "info2": 129.18,
      "info3": 41.15,
      "info4": 94.19,
    },
    "symptoms": [
      {
        "name": "name1",
        "socrates": {
          "associations": [
            "associations1"
          ],
          "onsetType": "onsetType1",
          "timeCourse": "timeCourse1"
        }
      },
      {
        "name": "name2",
        "socrates": {
          "timeCourse": "timeCourse2"
        }
      },
      {
        "name": "name3",
        "socrates": {
          "onsetType": "onsetType2"
        }
      },
      {
        "name": "name4",
        "socrates": {
          "onsetType": "onsetType3"
        }
      },
      {
        "name": "name5",
        "socrates": {
          "associations": [
            "associations2"
          ]
        }
      }
    ],
    "labs": [
      {
        "name": "name1 ",
        "value": "valuelab"
      }
    ]
  }
}

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

Answer 2

添加新的DOM节点时，浏览器将执行所谓的重绘节点，只是意味着它将css重新应用于DOM节点：

动态更改浏览器尝试在应对变化。因此，更改元素的颜色只会导致重新绘制元素。元素位置的更改将导致元素及其子元素和可能的兄弟姐妹的布局和重绘。添加DOM节点将导致该节点的布局和重新绘制。重大的更改（例如增加“ html”元素的字体大小）将导致缓存失效，重新布局和重新绘制整个树。

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

有用的链接在我起步时对我有很大帮助

还有why mobile first and media query basics

祝你好运，玩得开心！

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

3 个答案: