Angular会动态改变类的样式内容

Question

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

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

例如，这个类是这样的:

.garden {
color = white;
}

我只想把内容改成

.garden {
color = red;
}

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

我该怎么做呢?我没有找到像document.getCssByName("garden"这样的方法

谢谢

Answer 1

如果你有类名，你可以这样做作为一个解决方案:

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();

Answer 2

也许这是一个解决方案:

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