Resetting element styles with jQuery

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 开发者_C百科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.

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.

It does change for me. See an example here.

The problem is not your jQuery code, nor that the element is already styled. Any decent and recent browser will reapply styling to internal elements automatically.

The problem is that you are using innerbox as an ID: since there should be only one element with an id, the CSS engine of some browsers give weird priorities and probably bypass some CSS rules.

Try converting innerbox to a CLASS instead, and it should work as you expect.

BTW, which browser is exposing the problem?