<分区>
javascript - 通过 JavaScript 永久更改 HTML 文档的 "master"CSS 模板
标签 javascript html angular css
我有一个 CSS 类，用于以 CSS 布局网格格式显示许多 DIV:
.wrapper {
display: grid;
grid-templpate-columns: 200px 200px 200px;
}
并通过 javascript，我更改了一些使用它的元素的宽度(即 getElementByClass("wrapper") 和循环)。它适用于那些已经显示的内容:
问题:当我通过 JS 添加一个新的 DIV 时，新的 DIV 只会恢复到 200px 的宽度!
在我看来，当生成一个新元素(通过代码)时，浏览器调用原始模板并将其简单地映射(使用所有 200 像素)到我刚刚创建的新元素!
我环顾四周，找不到与更改存储在某处的“主”css 模板相关的主题...
问题:有没有办法永久改变加载的 CSS 模板的属性？
注意:我无法通过“.wrapper”循环来更改新添加的元素，因为我使用的是 Angular4，而且它似乎在呈现模板后不再运行任何代码(此处更改了表格 View )
最佳答案
为什么不将类添加到元素，然后在附加到 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>鉴于您使用的是 Angular ，您将拥有类似的内容:
export class MyComponent{
private people:string[];
ngInit(){
//get people
myService.retrievePeople().forEach(function(person){
addPerson(person);
})
}
addPerson(person){
people.push(person);
... update grid ...
}
}
关于javascript - 通过 JavaScript 永久更改 HTML 文档的 "master"CSS 模板，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46272092/