Changing all CSS styles with a property via Jquery

Question

On a page I include some css eg:

<style type='test/css'>
.myBox{
color:#000000;
border:#FFFFFF;
padding:4px;
}
.myBox2{
color:#000000;
border:#FFFFFF;
padding:4px;
}
</style>

I want to then change the "color" property set within both myBox and myBox2 in jquery, without knowing the actual name (myBox, myBox2) of the css style. In otherwords, I want to update ALL css styles on the page where color = certain value, and then also update border where = certain value.

An example (not valid code) might be:

$("all css [color:#000000]").html("#FF0000");

How could this be possible using jquery?

Answer 1

Perhaps you should look at refactoring your HTML + CSS. The entire point of CSS is to 'cascade' styles down through your site. So it would make awesome sense to have something like this declared:

body {color:#333;}

The above CSS property is inherited throughout all elements on your site. When it comes time to switch styles you could override the above style with your own:

$("body").css("color", "purple");

Or alternatively, maybe you want to have a look at a style sheet switcher, this gives you more fined grain control of your CSS (example), these style sheets could be generated at runtime, using a server side programming language (e.g. PHP) using a URL similiar to:

/css/generate-css.php?color=purple

Answer 2

Not sure if this would work for you, since it is a completely different approach.

Rather than use the color css, use the class to target elements and add a new class that contains the color css.

For example

css

.color1 {color:#000000;}
.color2 {color:#FFFFFF;}
.color3 {color:#FF00FF;}

If you have full control of the html just add the color class in addition to the .mybox class. If you can't do that, something like $(".mybox").addClass("color1");

The css classes can also be dynamically changed, but I don't have a good example for the javascript to do that.

If you can, this is probably a better solution than finding items by their color attribute. If you were to try swapping colors say mybox is red and mybox2 is blue. To swap the colors you will need to temporarily set one color to a unique color. Otherwise when you set all red items to blue, mybox and mybox2 will both be blue and the set all blue items to red will change mybox back to red and mybox2 becomes red. Hope this helps.