web-dev-qa-db-ja.com

CSS値（アプリ全体の色など）を動的に変更する方法など

一つの質問があります...

条件付きスタイリングが必要な場合：ng-classまたはng-style構造を使用する必要があります。

だが...

例：私は管理者であり、アプリケーションの色をcolorpickerからのカスタム色に変更したい。 cssのコードを変更するにはどうすればよいですか？

たとえば、style.cssに次の行があります。

body{
  background: #ffffff;
}

（a、h1などのすべてのタグもいくつかの色を実装しています）

そしてコントローラーでこれを#ffffffから#000000に変更します。

各コントローラの各タグでng-classまたはng-styleを使用せずにcssでこの色を変更する最良の方法は何ですか？

javascripthtmlcssangularjs
17
brabertaser19

最善の方法は、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

5
Bluety

JavaScriptでCSSルールを記述し、スタイルシートに動的に追加できます。その方法に関するいくつかの良い記事は here と here です。

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

もちろん、純粋なAngularの方法で、DOM /スタイルシートの相互作用をラップするディレクティブを作成します。

4
Tibos

私が考えることができる最も簡単な方法は、たとえば、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;}

お役に立てば幸いです。

3
AndreaM16