Prototype.js：重置setStyle

Question

有没有办法将样式重置为CSS中的内容？

例如：

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


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

现在我已经完成了它，我想把foo移回到原来的位置。我知道可以硬编码，但我需要对25个不同的div执行此操作。

谢谢

- jack moore

Answer 1

使用 null 值来设置样式可以在 prototype.js 中起到取消设置的作用。

因此，您也可以使用 $('foo').setStyle({top:null,left:null}) 来撤消您所做的更改。

- heiglandreas

Answer 2

设置样式并不会消除CSS类中的所有元素。它只覆盖了已更改的元素。控件的实际样式是CSS样式和style属性上的自定义样式的组合。要完全恢复回CSS样式，只需删除style属性即可。

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

编辑：

显然上述方法不起作用。根据评论中的建议，以下方法可以解决问题：

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

- David Morton

---

没起作用，但是$('foo').writeAttribute('style','');可以！谢谢！！ - jack moore

虽然问题中的示例似乎表明使用了 prototypejs，但答案似乎使用了 jQuery。而 writeAttribute 会完全从 DOM 节点中删除 style 属性，而其他答案只会删除其中某些设置。 - heiglandreas

Answer 3

您可以使用纯JavaScript命令来实现这一点，对我而言运行良好：

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

将删除整个style=""元素。

- Tom

Answer 4

你可以删除属性，但我认为你不能将其恢复。

如果您使用其他样式表更改布局，则可以还原它。这样，您应该能够启用样式表以显示更改，并禁用它以撤消更改。

最好的解决方案可能是将旧属性存储到数组中，并使用该数组将样式属性更改回来。

类似于这样：

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

- Kesty