Is there's any way how to reset styles back to what's in my CSS?

Example:

#foo {width: 50px; height: 50px; position: absolute; top: 150px; left: 250px;}


function moveFoo(newpostop, newposleft){
  $('foo').setStyle({top: newpostop+'px', left: newposleft+'px'});
}

Now when I'm done with it, I'd like to move foo back when it was. I know it can be hard-coded, but I need to do this with 25 different divs.

Thanks

Is there's any way how to reset styles back to what's in my CSS?

Example:

#foo {width: 50px; height: 50px; position: absolute; top: 150px; left: 250px;}


function moveFoo(newpostop, newposleft){
  $('foo').setStyle({top: newpostop+'px', left: newposleft+'px'});
}

Now when I'm done with it, I'd like to move foo back when it was. I know it can be hard-coded, but I need to do this with 25 different divs.

Thanks

• javascript
• prototypejs

4 Answers 4

Setting a style with a null-value does the trick with unsetting in prototype.js

So you can also use $('foo').setStyle({top:null,left:null}) to revert the changes you did.

Setting style doesn't eliminate all the elements in the CSS class. It only overrides the ones that were changed. The actual style of the control is a bination of the CSS style and the custom style on the style attribute. To revert back to the CSS style pletely, simply remove the style attribute.

$('#foo').removeAttr('style');

EDIT:

Apparently the above does not work. I've been advised in the ments that the following, however, does:

$('#foo').writeAttr('style', '');

You can use plain Javascript mand for that, for me works fine:

$('foo').removeAttribute('style');  

Will remove whole style="" element

You can remove an attribute, but I don't think you can revert it back.

You may revert it if you were using an additional stylesheet to change the layout. That way you should be able to enable the stylesheet to show the change, and disabled it to undo it.

The best solution will probably be to store the old attributes to an array, and use that array to change your style attributes back

Something like this:

   var tempStyle = new Array();

    function moveFoo(newpostop, newposleft){
      tempStyle ["foo"] = new Array();
      tempStyle ["foo"]["top"] = newpostop;
      tempStyle ["foo"]["left"] = newposleft;

      $('foo').setStyle({top: newpostop+'px', left: newposleft+'px'});
    }

   function restoreFoo(){
      $('foo').setStyle({top: tempStyle ["foo"]["top"]+'px', left: tempStyle ["foo"]["left"]+'px'});
    }