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?

I can only figure out how to target all css styles using $("*").css(), but it appears to be a bit laggy, perhaps because its also targeting all other non-css elements. — Joe
– Joe, Commented Mar 28, 2010 at 9:30
I tried using: $("* [type=text/css]").css(); this doesn't appear to do anything eg. the colors are not updating on the page. — Joe
– Joe, Commented Mar 28, 2010 at 9:32

wiifm · Accepted Answer · 2010-03-28 09:49:49Z

2

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

edited Mar 28, 2010 at 9:49

answered Mar 28, 2010 at 9:32

wiifm

3,7981 gold badge24 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Joe Over a year ago

No because I need to target ALL elements with "color" = "purple" and switch it to "red". If "color" = "blue", then I don't want to affect it. In this way, users could customize all colors (and other css elements) on the entire website which is my goal. The body is not the only element that has a color property either.

Joe Over a year ago

I'm sure it's possible to change all elements on the page, with a specific css value, to another css value.

wiifm Over a year ago

In this case, I would suggest the CSS style sheet switcher, this gives you the ability to have more fine grained control over your CSS

Joe Over a year ago

I want to be able to update the css "LIVE", I don't have any pre-set stylesheets made up.

wiifm Over a year ago

Just so we are clear, jQuery cannot select 'elements that are blue', api reference - api.jquery.com/category/selectors. So basically this boils yours options down to this: - Give all 'changeable' areas that you want jQuery to affect an explicit class - Generate CSS on the fly using PHP or similar, and use a style sheet switcher - Refactor HTML + CSS so that is easier to select said changeable areas with jQuery

|

Philip Tinney · Accepted Answer · 2010-03-28 10:42:20Z

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.

user520708 · Accepted Answer · 2010-11-26 14:37:35Z

1

$(document).ready(function () {

    $("body").find("*").filter(function() {
        return ( $(this).css("color") == "rgb(0, 0, 0)" );
    }).css("color", "red");

});

For better performance don't use "body" selector as in code above, instead use the specific selector you want changes to take effect in its descendant elements. Traversing all body elements and running the filter function for each of them is performance heavy for large pages, so change "body" with a more specific selector if you can and/or put a selector in "find" , example: $("#my_content").find("p").filter(function() { ...

Note: return value of: $(this).css("color") is in rgb format, so use rgb format to define the color to modify in the filter function above

edited Nov 26, 2010 at 14:37

answered Nov 25, 2010 at 23:20

user520708

112 bronze badges

Collectives™ on Stack Overflow

Changing all CSS styles with a property via Jquery

3 Answers 3

6 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

6 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related