如何動態地更改CSS值（如在整個應用程序的顏色）等

如果你想有條件的造型：你必須使用ng-class或ng-style建設。

但是......

例如：我是管理員，我想從colorpicker與自定義顏色來改變我的應用程序的顏色。我怎樣才能改變一些代碼在CSS？

例如，我有這行style.css：

body{ 
    background: #ffffff; 
}

（也都像一個標籤，H1等實現一些顏色）

和控制器我改變這個#ffffff到#000000。

什麼是最好的方法來改變這種顏色的CSS，而不使用ng-class或ng-style每個控制器中的每個標籤？

來源

2015-05-18 brabertaser19

您可以在JavaScript中編寫CSS規則並動態地將其添加到樣式表中。有關如何做到這一點的一些好文章是here和here。

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

當然，以純粹的角度方式，您將創建一個包裝DOM /樣式表交互的指令。

來源

2015-05-18 09:50:00 Tibos

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

來源

2015-05-18 09:50:04 Bluety

我能想到的是，例如，點擊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;}

希望我一直樂於助人。

來源

2015-05-18 10:04:15 AndreaM16

-5

另一種選擇是SASS或LESS，並使用變量處理顏色...

來源

2015-06-05 14:43:31

如何動態地更改CSS值（如在整個應用程序的顏色）等

回答

相關問題