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

Posted 2023-03-06

【中文标题】如何动态更改 css 值（如整个应用程序中的颜色）等

【英文标题】：How to dynamically change css values (like color in whole app) etc

【发布时间】：2015-07-29 17:58:24

【问题描述】：

我有一个问题...

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

但是……

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

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

body
  background: #ffffff;

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

在控制器中，我将这个 #ffffff 更改为 #000000。

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

【参考方案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..

在你想要的 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>

例如，您可以将颜色变量保存在 localStorage 中。演示：http://codepen.io/anon/pen/jPrabY

【参考方案2】：

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

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

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

【讨论】：

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

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

【参考方案3】：

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

html:

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

js:

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

css:

.myBoxbackground-color: #fff;

希望我对您有所帮助。

【参考方案4】：

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