veulent changer de couleur à plusieurs endroits en une seule fois!

Question

Mon problème est que j'ai quelques divs dans ma page. Tous ont en-tête de couleur similaire. Maintenant, si je dois changer la couleur (par exemple la couleur de fond) de tous les divs, je dois faire des changements autant de divs que j'ai. Est-il impossible de simplement changer ou dire écrire le code de couleur à un endroit (comme dans une variable) et l'utiliser ensuite comme valeur de couleur dans les styles intégrés à tous ces divs. Quelque chose comme des entités javascript.

Answer 1

Si vous avez besoin des variables en CSS, vous voudrez peut-être regarder compilateurs pré-CSS ^{(est-ce le bon terme?)}, comme Sass, qui le fait côté serveur et facilite les douleurs pour avoir beaucoup de différents couleur répétée sur plusieurs jeux de règles.

Sinon, lors du développement, essayez de scinder vos fichiers CSS en composants individuels, tels que typography.css, color.css etc. pour mieux les organiser. Vous aurez toujours envie de les combiner après le développement est terminé pour de meilleures performances, mais cela permet de garder les choses plus propres et plus ordonnées.

Enfin, vous pouvez toujours définir les grandes règles comme ceci:

#header, #footer, #nav, #sidebar { 
    color: orange; /* I like orange! */ 
} 

Ce qui réduirait la redondance un peu. L'utilisation de Javascript pour le style et la présentation ne doit être conservée qu'en dernier recours; il ya toujours outils disponibles pour garder votre CSS bien rangé; vous avez seulement besoin de les utiliser.

Answer 2

u peut écrire quelques css et jquery à ce ACHIVE

.color1 
{ 
    color:red; 
    background-color:green; 
} 

.color2 
{ 
    color:blue; 
    background-color:orange; 
} 

maintenant un événement u peut changer de classe. par exemple intitially u ont

<div class="header color1">SOME TEXT HERE</div> 
<div class="header color1">another header</div> 

u peut changer cela avec jquery ou même avec javascript :)

$("#somebutton").live("click", function(){ 
    $(".header").removeClass('color1'); 
    $(".header").addClass('color2'); 

}); 

cela va changer la couleur des deux têtes à un clic de bouton avec id somebutton

Answer 3

I suggère d'utiliser jQuery ou une autre bibliothèque javascript, pour ce faire.

affecter une classe à l'divs que vous souhaitez modifier, puis utilisez le code suivant (en leur donnant un CLAS « en-tête div »)

$('.header-div').('background-color','#FF0000'); 

cela va changer tous les éléments de la classe de 'en-tête div'

Answer 4

solution Jquery

définissent tous les divs avec une classe spécifique comme

<div class="changeable"></div> 

Ensuite, utilisez jquery pour changer l'arrière-plan

$(".change").click(function() { 
    $(".changeable").css("background","#000"); 
}); 

Answer 5

Que diriez-vous de définir la même classe sur tous les divs et mettre toutes les couleurs communes là-dedans? De cette façon, vous n'aurez qu'à changer la couleur de cette classe.