如何动态更改CSS值（如整个应用程序的颜色）等 [英] How to dynamically change css values (like color in whole app) etc

问题描述

我有一个问题...

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

If you want conditional styling: you must use ng-class or ng-style construction.

但... ...

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

For example: I'm an admin, and I want to change color of my application with custom color from colorpicker. How can I change some code in css?

例如，我在 style.css p>

For example I have this line in style.css:

body{
  background: #ffffff;
}

（像a，h1等所有标签都实现了一些颜色）

(also all tags like a, h1 etc implement some color)

，并在控制器中将此 #ffffff 更改为＃000000 。

and in controller I change this #ffffff to #000000.

在css中更改此颜色的最佳方法是，不使用 ng-class 或<$ c $

What is the best way to change this color in css, without using ng-class or ng-style on each tag in each controller?

推荐答案

最好的方法是生成一个文件color.css与所有css规则与颜色，背景颜色， color 等。但是angularjs是不够的。

The best way is generate a file like color.css with all css rules with color, background-color, border-color etc. overridden. But angularjs will not be enough.

color-default.css

body {
    background: #fff;
}

color.css
$ b

color.css

body {
    background: #f00;
}

---

方式

在要覆盖的每个元素上添加类。
为每个属性创建类如下：

---

Full JS way
Add class on every element you want to override. Create class for every properties like so:

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

在您希望的HTML上应用类：

Apply class on your html where you want:

<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

You can save the color variable in localStorage for example.
Démo: http://codepen.io/anon/pen/jPrabY

这篇关于如何动态更改CSS值（如整个应用程序的颜色）等的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！