web-dev-qa-db-fra.com

Comment changer dynamiquement les valeurs CSS (comme la couleur dans toute l'application), etc.

J'ai une question...

Si vous souhaitez un style conditionnel: vous devez utiliser ng-class ou ng-style construction.

Mais...

Par exemple: je suis administrateur et je souhaite changer la couleur de mon application avec une couleur personnalisée de colorpicker. Comment puis-je changer du code dans CSS?

Par exemple, j'ai cette ligne dans style.css:

body{
  background: #ffffff;
}

(également toutes les balises comme a, h1 etc. implémentent une certaine couleur)

et dans le contrôleur, je change cela #ffffff à #000000.

Quelle est la meilleure façon de changer cette couleur en CSS, sans utiliser ng-class ou ng-style sur chaque balise de chaque contrôleur?

javascripthtmlcssangularjs
17
brabertaser19

La meilleure façon est de générer un fichier comme color.css avec toutes les règles css avec color, background-color, border-color etc. remplacé. Mais angularjs ne suffira pas.

color-default.css 

body {
    background: #fff;
}

color.css 

body {
    background: #f00;
}

Méthode JS complète
Ajoutez une classe sur chaque élément que vous souhaitez remplacer. Créez une classe pour chaque propriété comme ceci:

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

Appliquez la classe sur votre html où vous voulez:

<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>

Vous pouvez enregistrer la variable de couleur dans localStorage par exemple.
Démo: http://codepen.io/anon/pen/jPrabY

5
Bluety

Vous pouvez écrire la règle CSS en JavaScript et l'ajouter dynamiquement à une feuille de style. Quelques bons articles sur la façon de le faire sont ici et ici .

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

Bien sûr, d'une manière Angular, vous créez une directive qui enveloppe l'interaction DOM/feuille de style.

4
Tibos

La façon la plus simple à laquelle je peux penser est, par exemple, de cliquer sur myBox pour changer sa couleur d'arrière-plan.

html:

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

js:

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

css:

.myBox{background-color: #fff;}

J'espère que j'ai été utile.

3
AndreaM16