如何以编程方式向类添加样式 - Angular 2答案

【问题标题】：How to add style to a class programmatically - Angular 2如何以编程方式向类添加样式 - Angular 2
【发布时间】：2017-07-12 16:10:21
【问题描述】：

在我的应用程序中，我使用了一个没有暴露其元素的库。我只能通过它的选择器使用它。

我正在使用 >>> 覆盖它的 css。例如：

>>> .wrapper{ top: 0px !important; width: 400px !important; }

现在我想添加一个新类temp-wrapper，并在这个类中添加width: 100px !important。

我可以使用classList.add('temp-wrapper') 添加它。

但问题是当某些事件发生时宽度值来自另一个组件。它们是我在运行时将一些样式附加到特定类的任何方式吗？

我还使用了ngStyle，但它不起作用，因为我必须在类名前使用>>> 才能覆盖。

【问题讨论】：

标签： javascript html css angular ng-class

【解决方案1】：

您可以动态创建样式元素，放置css定义并添加组件do文档，例如：

var style = document.createElement('style');
style.id = "myStyleId" // so later you can track and update easily
var css = ".temp-wrapper { backdround-color: red; border: 1px solid blue; .......}";
style.innerHTML = css;
document.head.append(style);

如果您不想应用一些内联样式并想添加一些类和想创建类定义dynamicall

【讨论】：

在这种情况下，类名是什么。我需要在类名前添加>>> 以实现覆盖
一切都将进入变量 css，无论你想写什么 css。
我不确定您所说的 >>> 到底是什么意思，我已经编辑了答案并添加了类名，以便您可以动态地将类添加到样式中。如果您想覆盖某些样式，请在类中为该特定样式使用 !important 标志。