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

Question

我有一个问题...

如果你想要条件样式:你必须使用 ng-class 或 ng-style 结构。

但是……

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

例如，我在 style.css 中有这一行:

body{
  background: #ffffff;
}

(所有标签如 a、h1 等都实现了一些颜色)

在 Controller 中，我将此 #ffffff 更改为 #000000。

如果不在每个 Controller 的每个标签上使用 ng-class 或 ng-style，在 css 中更改此颜色的最佳方法是什么？

Answer 1

最好的方法是生成一个类似 color.css 的文件，其中包含所有 css 规则，包括 color、background-color、border-color 等.覆盖。但是 angularjs 还不够。

color-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..

在你想要的地方应用类:

<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 中。
演示:http://codepen.io/anon/pen/jPrabY