Javascript:如何撤消element.style的设置？

Question

我的文档中有一个元素,它具有背景颜色和通过常规CSS规则设置的图像.

当某个事件发生时,我想要为该项设置动画,突出显示它(我正在使用Scriptaculous,但这个问题适用于任何会做同样事情的框架).

new Effect.Highlight(elHighlight, { startcolor: '#ffff99', endcolor: '#ffffff', afterFinish: fnEndOfFadeOut });

我面临的问题是,在动画完成后,元素将保留以下样式(根据FireBug):

element.style {
  background-color:transparent;
  background-image:none;
}

这会覆盖CSS规则,因为它在元素级别设置,所以我失去了项目曾经拥有的背景......

我想要做的是,在动画完成后我正在运行的回调函数中,将样式属性设置为"使它们"消失的值.

var fnEndOfFadeOut = function() {
  elHighlight.style.backgroundColor = "xxxxx";
  elHighlight.style.backgroundImage = "xxxxx";
}

我想弄清楚的是放入"xxxx"(或者如何以不同的方式做同样的事情).
我试过'自动','继承'和''(空白字符串),但都没有用(我真的没想到它们可以工作,但我在这里一无所知).

我也尝试过:elHighlight.style =""; 可以预见的是,它会抛出异常.

我该怎么做才能克服这个问题？
我知道我可以在我突出显示的元素中放置一个跨度,然后突出显示该跨度,但我希望我能够避免额外无用的标记.

谢谢!

Answer 1

您可能没有在正确的元素上设置样式.它可能被设置在父节点中的某个位置.

elHighlight.style.backgroundColor = "";
elHighlight.style.backgroundImage = "";

您还可以通过调用以下方法删除所有默认样式:

elHighlight.style.cssText = "";

在任何情况下,您仍然必须在设置这些属性的特定元素上执行此操作,这意味着您可能需要在parentNode上执行递归,直到找到它为止.