如何将样式添加到通过 Javascript 在 Css 文件中完成的附加 div答案

【问题标题】：How to add styles to a appended div done through Javascript in Css file如何将样式添加到通过 Javascript 在 Css 文件中完成的附加 div
【发布时间】：2021-10-21 13:41:47
【问题描述】：

这是我的 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>

这是我的 Javascript 文件：

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

在这里，我想使用 CSS 文件为我的 members div 设置样式，但样式不适用于它：

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

【问题讨论】：

标签： javascript html css angular

【解决方案1】：

使用 ::ng-deep 伪类来禁用视图封装。或者将您的样式移至全局样式。

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

【讨论】：

【解决方案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" />

【讨论】：