如何动态更改css值(如整个应用程序中的颜色)等

Question

我有一个问题...

如果您想要条件样式:您必须使用ng-class或ng-style构造.

但...

例如:我是管理员,我想用自定义颜色更改我的应用程序的颜色colorpicker.如何在css中更改一些代码？

例如,我有这一行style.css:

body{
  background: #ffffff;
}

(也像a,h1等所有标签都实现了一些颜色)

在控制器中我将其更改#ffffff为#000000.

什么是改变这种颜色在CSS中,不使用最好的办法ng-class还是ng-style在每个控制器的每个标签？

Answer 1

最好的办法是产生像color.css文件与所有的CSS规则color,background-color,border-color等重写.但是angularjs还不够.

颜色default.css

body {
    background: #fff;
}

color.css

body {
    background: #f00;
}

完整的JS方法
在要覆盖的每个元素上添加类.为每个属性创建类,如下所示:

.skin-color { color: {{color}}; }
.skin-background-color { background-color: {{color}}; }
.skin-border-color { border-color: {{color}}; }
etc..

在你想要的html上应用class:

<h1 class="skin-color">My title</h1>
<p>Hello I'm online!</p>
<p class="skin-background-color">No difference!</p>
<p><a href="#">I'm link</a></p>

例如,您可以将颜色变量保存在localStorage中.
Démo:http://codepen.io/anon/pen/jPrabY

Answer 2

您可以用 JavaScript 编写 CSS 规则并将其动态添加到样式表中。这里和这里有几篇关于如何做到这一点的好文章。

var myColor = '#FF00FF';
var stylesheet = /* get stylesheet element */;
stylesheet.insertRule('.dynamic-color { background-color:"' + myColor +'";}',0);

当然，以纯粹的 Angular 方式，您将创建一个包装 DOM/样式表交互的指令。