时间戳

首页 > 解决方案 > 添加类的动态创建的 div 没有样式

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

问题描述

我正在尝试通过 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 循环时它才开始失败。

标签： javascripthtmlcsstypescript

解决方案

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

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

推荐阅读