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

标签 javascript html css angular ng-class

在我的应用程序中,我使用的库尚未公开其元素。 我只能通过它的选择器使用它。

我使用>>>覆盖它的CSS。例如:

>>> .wrapper{ 顶部:0px!重要; 宽度:400px!重要; }

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

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

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

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

最佳答案

您可以动态创建样式元素,放置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);

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

关于javascript - 如何以编程方式向类添加样式 - Angular 2,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45062831/

相关文章:

javascript - 更改 jQuery 后存储最终值

javascript - jquery 提交();不适用于 Firefox

javascript - 使用 AJAX 从跨源服务器检索图像

php - 如何保存响应式菜单打开/关闭值?

html - 列表中的图像和多个文本行

html - 固定菜单不起作用

javascript - 如何使用 Jquery 更改字体大小的文本 <input type= range>

javascript - 使用具有高 DPI 设置的 window.scroll 捕获屏幕截图

html - 如何更改 CSS flex-box 列的宽度?

python - 从网站解析——源代码不包含我需要的信息