添加类的动态创建的 div 没有样式

Question

我正在尝试通过 for 循环动态生成一些 div。尽管我添加了一个类并且我可以在开发人员工具中看到该类，但它们没有颜色和大小样式。

public addDivs() {
   for(let i = 0; i < 10; i++) {
      let div = document.createElement('div');
      div.classList.add('test');
      div.innerHTML = 'testing'
   }
}


.test {
   color:red;
   background-color:green;
   height: 40px;
   width: 40px;
}

当我添加这样的样式时，它确实有效。

public addDivs() {
   for(let i = 0; i < 10; i++) {
      let div = document.createElement('div');
      div.innerHTML = 'testing'
      div.style.color = 'red';
   }
}

是否可以（不使用 JQuery）从 css 文件中获取样式？

编辑：另外我应该补充一点，只有当我将代码放入 for 循环时它才开始失败。

Answer 1

创建后添加元素。现有的类和样式适用于动态创建的节点。

function addDivs() {
   for(let i = 0; i < 10; i++) {
      let div = document.createElement('div');
      div.classList.add('test');
      div.innerHTML = 'testing:'+i;
      document.querySelector("body").appendChild(div);
   }
}
addDivs();

.test {
   color:red;
   background-color:green;
   height: 40px;
   width: 100px;
   margin-bottom:4px;
}