如何在Css文件中通过Javascript为附加的div添加样式

Question

这是我的html文件

<div id="addingMembers">
</div>
<div class="selectMember">
<div class="selectTitle" (click)="addMember()">
<p class="selectMemTitle">Add a member</p>
<mat-icon aria-hidden="false" aria-label="add icon">add_circle_outline</mat-icon>
</div>
</div>

this is myJavascript文件:

addMember(){
const x = document.getElementById('addingMembers');   
x.innerHTML+ = 
`<div id="members">
Hey I'm added
</div> 
`;
}

这里，我想样式化我的成员div使用CSS文件，但样式不应用于它:

#addingMembers #members{
background-color: red;
}

Answer 1

使用::ng-deep伪类来禁用视图封装。或者把你的样式移到全局样式。

::ng-deep #addingMembers #members{
background-color: red;
}

Answer 2

为要添加的控件添加一个类。查看下面的示例。

function tes() {
let change = document.getElementById("addingMembers");
change.innerHTML = '<input type="text" class="randomCls"/>';
}

.randomCls{
background-color:red;
}

<div id="addingMembers">
</div>
<input type="button" id="btn1" onclick="tes()" value="Check" />