改变HTML文档＆＃34; master＆＃34; JavaScript永久使用CSS模板

Question

我有一个CSS类，用于以CSS布局网格格式显示许多DIV：

.wrapper {
   display: grid;
   grid-templpate-columns: 200px 200px 200px;
}

通过javascript，我改变了一些使用它的元素的宽度（即getElementByClass("wrapper")和循环）。它适用于那些已经显示的人：

问题：当我通过JS添加新的DIV时，新的DIV只会恢复到200px的宽度！

在我看来，当生成一个新元素（通过代码）时，浏览器调出原始模板并简单地将其（使用所有200px）映射到我刚刚创建的新元素！

我环顾四周，找不到与改变＆＃34; master＆＃34;相关的话题。 css模板存储在某个地方......

问题：有没有办法永久改变加载的CSS模板的属性？

注意：我无法遍历＆＃34; .wrapper＆＃34;改变新添加的元素是因为我使用Angular4并且在渲染模板之后似乎不再运行任何代码（这里改变表格视图）

Answer 1

为什么不将类添加到元素中，然后在附加到DOM之前更改宽度，或者追加到DOM然后直接更改宽度？ ：）

看一下这个片段：

const wrappers = document.getElementsByClassName('wrapper');
for (let i = 0; i < wrappers.length; i++) {
  const div = document.createElement('div');
  div.style.background = 'yellow';
  div.style.color = 'black';
  div.innerHTML = 'appended';
  wrappers[i].style['grid-template-columns'] = '200px 200px 200px 200px';
  wrappers[i].appendChild(div);

}

.wrapper {
  display: grid;
  grid-template-columns: 200px 200px 200px;
  color: white;
}

.blue {
  background: orange;
}

<div class="wrapper">
  <div class="blue">
    200px
  </div>
  <div class="blue">
    200px
  </div>
  <div class="blue">
    200px
  </div>

</div>

<div class="wrapper">
  <div class="blue">
    200px
  </div>
  <div class="blue">
    200px
  </div>
  <div class="blue">
    200px
  </div>
</div>

鉴于你正在使用角度，你会有类似的东西：

export class MyComponent{
    private people:string[];

    ngInit(){
      //get people
      myService.retrievePeople().forEach(function(person){
          addPerson(person);
      })
    }

    addPerson(person){
          people.push(person);
          ... update grid ... 
    }
}