Angular中如何动态修改指定CSS类样式并全局应用到对应元素

实现方法 #

你可以通过两种方式直接修改CSS类规则，所有携带该类的元素会自动应用新样式，无需操作对应DOM元素：

方案1：追加高优先级样式规则（推荐）

直接新增同名样式规则覆盖原有规则，实现最简单、兼容性最好：

// 定义新的样式规则，加!important可确保覆盖原有同优先级规则
const newCssRule = `.garden { color: red !important; }`;
// 创建style标签
const style = document.createElement('style');
style.textContent = newCssRule;
// 插入到head末尾，优先级高于之前加载的所有样式
document.head.appendChild(style);

如果需要反复修改该类的样式，可以提前把创建的style元素存在变量里，后续直接修改style.textContent即可，不需要重复创建标签。

方案2：直接修改原有样式表规则

如果不想新增额外的样式标签，可以遍历现有样式表找到目标规则直接修改：

// 遍历页面所有已加载的样式表
for (const sheet of document.styleSheets) {
  try {
    // 遍历样式表内的所有规则
    const rules = sheet.cssRules || sheet.rules;
    for (let i = 0; i < rules.length; i++) {
      // 匹配到目标类的规则
      if (rules[i].selectorText === '.garden') {
        // 直接修改样式属性
        rules[i].style.color = 'red';
        break;
      }
    }
  } catch (err) {
    // 跨域引入的外部样式表会触发权限报错，直接跳过即可
    continue;
  }
}

注意该方案无法修改跨域加载的外部CSS文件内的规则。

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