want to change color at multiple places in one go !

Question

Hi,

My problem is I have couple of divs in my page. All have header of similar color. Now if I have to change the color(for example background color) of all divs, I have to make changes as many divs I have. Is it not possible to just change or say write the color code at one place (like in a variable) and the then use that variable as color value in the embedded styles to all those divs. Something like javascript entities.

Answer 1

u can write some css and jquery to achive this

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

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

now on some event u can change classes. for example intitially u have

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

u can change this with jquery or even with javascript :)

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

});

this will change color of both headers at click of button with id somebutton

Answer 2

I would suggest using jQuery or another javascript library, to do this.

Assign a class to the divs you wish to alter, and then use the following code (when giving them a clas of 'header-div')

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

this will change ALL elements with the class of 'header-div'

Answer 3

Jquery solution

define all the divs with a specific class like

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

Then use jquery to change the background

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

Answer 4

How about setting the same class on all divs and set all common colors in there? That way you'd only have to change the color for that class.

Answer 5

If you need variables in CSS, you might want to look at CSS pre-compilers ^{(is this the correct term?)}, such as Sass, which does this Server-side and eases the pains for having many different color repeated across multiple rulesets.

Otherwise, when developing, try splitting your CSS files into individual components, such as typography.css, color.css etc. to help better organise them. You'll still want to combine them after development is complete for better performance, but doing this does help keep things neater and tidier.

Lastly, you can always define large rules like this:

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

Which would reduce redundancy somewhat. Using Javascript for styling and presentation should only be kept as a last resort; there are always tools available to keep your CSS tidy; you only need to use them.