Как получить "appendChild" созданные div для использования уже существующих стилей

Question

Я создаю некоторые div и назначаю некоторые стили CSS с атрибутом div. Стили 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.