如何获取“ appendChild”创建的div以使用已经存在的样式

Question

我正在创建一些div，并使用div class属性分配一些CSS样式。 CSS样式已经在我的CSS样式表中定义，并且已经定义了边框和颜色的属性。问题是什么时候 我用预定义的类创建了新的div，但样式未显示。

this.round = 0;


for (var i = 0; i < 4; i++) {
  var div = document.createElement("div");
  div.setAttribute("class", "guess-cell");
  document.getElementsByClassName("row")[this.round + 2].appendChild(div);
}

.guess-cell {
  padding-top: 7px;
  overflow: hidden;
  font-size: 20px;
  background-color: var(--main-color-light);
  color: var(--main-color);
}

<div class="row"></div>
<div class="row"></div>
<div class="row"></div>

Answer 1

@ ruben-tapadas，您正尝试在CSS中使用自定义属性，但尚未在代码段中定义自定义属性。您需要添加自定义属性。

例如：

:root {
   --main-color-light: coral;
   --main-color: blue;
}

因此您的整体代码段现在看起来像

this.round = 0;


for (var i = 0; i < 4; i++) {
  var div = document.createElement("div");
  div.setAttribute("class", "guess-cell");
  document.getElementsByClassName("row")[this.round + 2].appendChild(div);
}

:root {
  --main-color-light: coral;
  --main-color: blue;
}

.guess-cell {
  padding-top: 7px;
  overflow: hidden;
  font-size: 20px;
  background-color: var(--main-color-light);
  color: var(--main-color);
}

<div class="row"></div>
<div class="row"></div>
<div class="row"></div>

现在尝试一下，如果您有任何疑问，请告诉我。

Answer 2

使用

div.classList.add("guess-cell");

代替setAttribute。