如何在Angular2+控制器中修改已存在CSS类的属性值？

实现思路 #

直接操作浏览器的CSS对象模型（CSSOM），定位全局样式表中.users类对应的CSS规则，再根据业务条件修改其color属性，全程无需改动组件模板。

代码实现 #

在组件的ngOnInit方法中添加以下逻辑：

ngOnInit(): void {
  // 替换为你的实际业务判断条件
  const isColorChanged = true;
  const targetColor = isColorChanged ? '#e74c3c' : '#2c3e50';

  // 遍历所有全局样式表
  for (const sheet of document.styleSheets) {
    try {
      // 遍历当前样式表内的所有规则
      for (const rule of sheet.cssRules) {
        // 匹配目标类选择器规则
        if (rule instanceof CSSStyleRule && rule.selectorText === '.users') {
          // 修改color属性值
          rule.style.color = targetColor;
          // 找到目标规则后跳出循环，提升执行效率
          return;
        }
      }
    } catch (e) {
      // 跨域样式表会触发权限异常，直接跳过即可
      continue;
    }
  }
}

注意事项 #

• 若目标样式表来自跨域资源（如CDN加载的样式文件），浏览器会抛出权限错误，需将.users类放在本域的样式文件中。
• 如果.users类在多个样式表中重复定义，上述代码只会修改第一个匹配到的规则；若需修改所有匹配规则，删除return语句即可。

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