使用角度向现有类添加样式答案

【问题标题】：Add styles to a existing class with angular使用角度向现有类添加样式
【发布时间】：2018-05-02 19:28:33
【问题描述】：

我的应用中有许多现有的类，并希望通过代码设置样式（主题化功能）。

例如<button class="mybutton">click</button>

我需要类似的东西：

<style>
    .mybutton{
        background-color: {{company?.buttonBackgroundColor}}!important;
    }
</style>

但这当然行不通。在不替换所有现有类的情况下有什么好的解决方案？

编辑：Angular 2+，而不是 Angular js。对不起

【问题讨论】：

为什么不使用 css 变量呢？你可以通过 JS 设置那里的值。
ie不支持

标签： javascript css angular

【解决方案1】：

我会建议一种不同的主题化方法。为每个主题创建一个覆盖必要规则的 *.css 文件，并在您想要切换主题时动态地将适当的样式表添加到 DOM（查看How to load up CSS files using Javascript? 以了解如何做到这一点）。

【讨论】：

【解决方案2】：

对我来说，一个很好的解决方案是 vanilla js：

var selects = document.getElementsByClassName('mybutton')
        for (var i = 0, il = selects.length; i < il; i++) {
            selects[i].style.color = this.company.buttonForegroundColor;

        }

【讨论】：

【解决方案3】：

在 Angular 中，您可以访问元素并更改它的类。你可以做更多的事情，比如改变它的属性，但我认为使用类更整洁。然后，您可以使用以下方式向 DOM 添加类：

var myEl = angular.element( document.querySelector( '#div1' ) );
myEl.addClass('alpha');

您可以在这里找到一些想法： https://stackoverflow.com/a/30410490/5250103

另外，另一个好的解决方案是使用条件类 (ngClass)： https://stackoverflow.com/a/16529903/5250103

他解释道：

ngClass 指令适用于任何计算为真或假的表达式，有点类似于 Javascript 表达式，但有一些区别，您可以阅读here。如果您的条件过于复杂，那么您可以使用返回真假的函数，就像您在第三次尝试中所做的那样。

给出here的例子

ng-class="{'test': obj.value1 == 'someothervalue' || obj.value2 == 'somethingelse'}"

我不打算窃取任何 anwser，但正如 cmets 中所建议的，这是经过编辑的，并且引用了它的作者。

希望对你有帮助！

【讨论】：