Question

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

e.g。 <button class="mybutton">click</button>

我需要类似的东西：

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

但当然这不起作用。如果没有替换所有现有的类，那会是一个很好的解决方案吗？

编辑：角度2+，而非角度js。遗憾

Answer 1

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

Answer 2

在角度中，您可以访问该元素并更改它的类。你可以做更多的事情，比如改变它的属性，但我认为使用类更整洁。然后，使用以下命令为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指令适用于任何评估truthy或falsey的表达式，有点类似于Javascript表达式但有一些差异，你可以阅读here。如果你的条件太复杂，那么你可以使用一个返回真或假的函数，就像你在第三次尝试时那样。

给出here

的示例

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

我并不打算偷走任何一个人，但正如评论中所建议的那样，这篇文章已被编辑，并引用了它的作者。

我希望它有所帮助！

Answer 3

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

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

        }

使用angular为现有类添加样式

3 个答案: