Angular动态改变类样式内容答案

【问题标题】：Angular dynamically change class style contentAngular动态改变类样式内容
【发布时间】：2021-11-25 17:10:09
【问题描述】：

我知道我想要动态更改内容的类的名称。所以我不需要通过它的 id 来获取任何元素。我只是想随时更改课程内容。

我无法在html中添加class或ngclass，因为这个html不是我自己的代码生成的

例如，说类是这样的：

.garden {
color = white;
}

我只是想把内容改成

.garden {
color = red;
}

并将其应用于所有具有此类样式的 HTML 元素

我该怎么做？我没有找到像 document.getCssByName("garden") 之类的方法

谢谢

【问题讨论】：

标签： html css angular typescript styles

【解决方案1】：

也许这是一个解决方案：

ngAfterViewInit() {
    document.querySelector('.garden' as HTMLElement).style.color = 'red';
}

【讨论】：

【解决方案2】：

如果你有类名，你可以这样做作为一种解决方法：

const cssClass = '.garden {color = red !important;}';
style = document.createElement('style');
document.head.appendChild(style);
style.type = 'text/css';
style.id = 'myTempStyle';
if (style.styleSheet){
  style.styleSheet.cssText = css;
} else {
  style.appendChild(document.createTextNode(css));
}

对于删除：

documet.getElementById('myTempStyle').remove();

【讨论】：