如何在CSS文件中为Javascript动态追加的div元素添加样式

原因1：JS语法错误导致元素未成功插入 #

你提供的JS代码中innerHTML+ = 中间存在多余空格，正确的拼接语法是+=，不可有空格。语法错误会导致addMember方法执行失败，动态div根本没有插入到DOM树中，样式自然无法生效。

修复方案 #

修正JS语法即可：

addMember(){
  const x = document.getElementById('addingMembers');   
  // 去掉+=中间的多余空格
  x.innerHTML += 
    `<div id="members">
    Hey I'm added
      </div> 
    `;
}

原因2：框架视图封装导致样式匹配失效 #

从代码中的(click)事件绑定、mat-icon组件可以判断你使用的是Angular框架。Angular默认开启Emulated模式的视图封装，会自动给当前组件所有静态元素添加唯一属性（例如_ngcontent-xxx），组件内的CSS选择器也会自动加上这个属性前缀，而你通过JS动态插入的元素没有这个属性，就会导致CSS选择器匹配不到对应的动态元素。

修复方案（任选其一即可） #

• 方案1：把#addingMembers #members的样式写到项目全局样式文件中（比如Angular项目根目录的styles.css），全局样式不会加属性前缀，可以正常匹配所有动态元素。
• 方案2：使用Angular的::ng-deep伪类穿透视图封装，修改CSS代码为：

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

• 方案3：关闭当前组件的视图封装，在组件的@Component装饰器中添加配置即可：

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.css'],
  // 关闭视图封装
  encapsulation: ViewEncapsulation.None
})

原因3：样式优先级被覆盖 #

如果存在其他更高优先级的选择器（比如行内样式、权重更高的ID/类选择器）匹配到#members元素，会覆盖你写的样式。

修复方案 #

打开浏览器开发者工具的元素面板，查看#members元素的样式列表，确认你的样式是否被划掉，调整选择器权重即可。

内容的提问来源于stack exchange，提问作者Anonymous