Prototype.js: reset setStyle

Question

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

Answer 1

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 combination of the CSS style and the custom style on the style attribute. To revert back to the CSS style completely, simply remove the style attribute.

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

EDIT:

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

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

Answer 2

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'});
    }