After using JQuery ".css" method, how do you change it back to normal?

Question

This is my original CSS for my #frame div.

....#frame{ position:relative; top:35px; }

Then, I use JQuery to change the CSS of my div...

$('#frame').css("position","absolute"); $('#frame').css("left",50);

Now, how do I clear all those changes, and revert back to normal?

Answer 1

You can't without explicitly setting it back to the old property values.

I'd probably use a separate class e.g.:

.alternativeFrame {
    position: absolute;
    left: 50px;
}

And then use addClass and removeClass:-

$('#frame').addClass('alternativeFrame');
$('#frame').removeClass('alternativeFrame');

Or just:-

$('#frame').toggleClass('alternativeFrame');

Also remember that you can chain your selectors together for ease and speed, so for your first example you can end up doing:-

$('#frame').css("position","absolute").css("left",50);