Javascript 如何动态更改 css 值（如整个应用程序中的颜色）等
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/30299666/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to dynamically change css values (like color in whole app) etc
提问by brabertaser19
I have one question...
我有一个问题...
If you want conditional styling: you must use ng-classor ng-styleconstruction.
如果您想要条件样式：您必须使用ng-class或ng-style构造。
But...
但...
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?
例如：我是管理员，我想使用自定义颜色更改我的应用程序的颜色colorpicker。如何更改 css 中的某些代码？
For example I have this line in style.css:
例如，我有这一行style.css：
body{
background: #ffffff;
}
(also all tags like a, h1 etc implement some color)
（所有标签，如 a、h1 等都实现了某种颜色）
and in controller I change this #ffffffto #000000.
在控制器中，我将其更改#ffffff为#000000.
What is the best way to change this color in css, without using ng-classor ng-styleon each tag in each controller?
在 css 中更改此颜色的最佳方法是什么，而无需在每个控制器中的每个标签上使用ng-class或ng-style？
回答by Bluety
The best way is generate a file like color.css with all css rules with color, background-color, border-coloretc. overridden. But angularjs will not be enough.
最好的办法是产生像color.css文件与所有的CSS规则color，background-color，border-color等重写。但是 angularjs 是不够的。
color-default.css
颜色-default.css
body {
background: #fff;
}
color.css
颜色.css
body {
background: #f00;
}
Full JS way
Add class on every element you want to override.
Create class for every properties like so:
完整的 JS 方式
在要覆盖的每个元素上添加类。为每个属性创建类，如下所示：
.skin-color { color: {{color}}; }
.skin-background-color { background-color: {{color}}; }
.skin-border-color { border-color: {{color}}; }
etc..
Apply class on your html where you want:
在您想要的 html 上应用类：
<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>
You can save the color variable in localStorage for example.
Démo: http://codepen.io/anon/pen/jPrabY
例如，您可以将颜色变量保存在 localStorage 中。
演示：http: //codepen.io/anon/pen/jPrabY
回答by Tibos
You could write the CSS rule in JavaScript and add it to a stylesheet dynamically. A couple of good articles on how to do that are hereand here.
您可以用 JavaScript 编写 CSS 规则并将其动态添加到样式表中。这里和这里有几篇关于如何做到这一点的好文章。
var myColor = '#FF00FF';
var stylesheet = /* get stylesheet element */;
stylesheet.insertRule('.dynamic-color { background-color:"' + myColor +'";}',0);
Of course, in a pure Angular way, you would create a directive that wraps the DOM/stylesheet interaction.
当然，以纯粹的 Angular 方式，您将创建一个包装 DOM/样式表交互的指令。
回答by AndreaM16
The easiest way I can think about is, for example, clicking on myBox changes its background-color.
我能想到的最简单的方法是，例如，单击 myBox 更改其背景颜色。
html:
html：
<div class="myBox" ng-click="changeBackgroundColor()"></div>
js:
js：
$scope.changeBackgroundColor = function(){
angular.element('.myBox').css('background-color', '#000');
}
css:
css：
.myBox{background-color: #fff;}
Hope I've been helpfull.
希望我有所帮助。
回答by Caio Kawasaki
Another alternative is SASS or LESS and deal with colors using variable...
另一种选择是 SASS 或 LESS 并使用变量处理颜色......
