Replace this color every time with this color in css with jquery

Question

I have many div s, some of them have background-color: #aaa , others have font color: #aaa and others border-color: #aaa . Other div have different colors, it does not matter.

I want to change these colors ( #aaa ) to #ccc everywhere in CSS.
I know how to change the background color of a div , but this is not a problem here, I have too many div to change them one at a time.

I am trying to find a jQuery function that will allow me to find a word (here #aaa ) and replace it with another ( #ccc ) in CSS.

It should be like this, but my code is incorrect:

 $("*").if(backgroundColor == "#aaa"){replace by "#ccc"}, if(color == "#aaa"){replace by "#ccc"}, if(borderColor == "#aaa"){replace by "#ccc"}, etc.. 

Answer 1

You want to iterate over all the elements of the type you want (in this case I selected a div with its super generic) and dynamically assign a color like this:

HTML:

 <div id="one">Some text</div> <div id="two">Some text</div> <div id="three">Some text</div> <div id="four">Some text</div> <div id="change"> <input type="button" value="Change Colors!" /> </div> 

JQuery

 $("#change").click(function () { $("div").each(function () { var color = $(this).css("color"); if (color == "rgb(170, 170, 170)") { $(this).css("color", "#ccc"); } }); }); 

NOTE. JQuery .css() returns an RGB color value such as rgb (r, g, b), so you need to convert the returned RGB value to a HEX value. This can be done programmatically, but is beyond the scope of this question.

CSS

 #one, #two { color: #aaa; } #three, #four { color: green; } 

Here is the JSFiddle:

http://jsfiddle.net/hQkk3/44/