Question

Does anyone know how to reset the styles of an element with jQuery? For instance, I have a stylesheet like this:

.container-red {  background-color: #f00; }
.container-red #innerbox { background-color: #fff; }
.container-white { background-color: #fff; }
.container-white #innerbox { background-color: #f00; }
#innerbox { margin: 20px; }

And this markup:

<div id="container" class="container-red">
     <div id="innerbox">Some text here</div>
</div>

Then when I change the class using jQuery

$("#container").removeClass("container-red").addClass("container-white");

the innerbox styling does not change to match, since it has already been styled, which leaves me with a white container and a white inner box, rather than a white container and a red inner box. Therefore, I want to be able to do something like

$("#container").children().resetStyles();

and have each of the containers children update to the correct styling

EDIT: Sorry, you’re all right, the code does work fine, my problem was simply that I had some other css overriding my class styling.

Answer 1

You are doing something wrong i think because i tested it and to me it works:

http://jsfiddle.net/VH4du/

I tested it on chrome, firefox and IE9.