如何动态地更改CSS值（如在整个应用程序的颜色）等

问题描述：

如果你想有条件的造型：你必须使用ng-class或ng-style建设。

但是......

例如：我是管理员，我想从colorpicker与自定义颜色来改变我的应用程序的颜色。我怎样才能改变一些代码在CSS？

例如，我有这行style.css：

body{ 
    background: #ffffff; 
}

（也都像一个标签，H1等实现一些颜色）

和控制器我改变这个#ffffff到#000000。

什么是最好的方法来改变这种颜色的CSS，而不使用ng-class或ng-style每个控制器中的每个标签？

答

您可以在JavaScript中编写CSS规则并动态地将其添加到样式表中。有关如何做到这一点的一些好文章是here和here。

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

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

hm，如何更好地获取样式表的角度？也许你有一些代码？ – brabertaser19

@ brabertaser1992这两个链接的每一个都有一些代码。最简单的方法是在样式表中添加一个ID并使用document.getElementById检索它。 – Tibos

答

最好的方法是生成一个类似color.css的文件，其中所有的css规则都与color,background-color,border-color等重写。但是angularjs是不够的。

颜色default.css

body { 
    background: #fff; 
}

color.css

body { 
    background: #f00; 
}

全部JS方式
要覆盖每一个元素添加类。像这样每一个属性创建类：

<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例如：

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

在HTML你想要应用类。
演示：http://codepen.io/anon/pen/jPrabY

答

我能想到的是，例如，点击myBox上改变其背景颜色的最简单方法。

HTML：

<div class="myBox" ng-click="changeBackgroundColor()"></div>

JS：

$scope.changeBackgroundColor = function(){ 
    angular.element('.myBox').css('background-color', '#000'); 
}

CSS：

.myBox{background-color: #fff;}

希望我一直乐于助人。

答

另一种选择是SASS或LESS，并使用变量处理颜色...

如何动态地更改CSS值（如在整个应用程序的颜色）等

相关推荐