我的文档中有一个元素,它具有背景颜色和通过常规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 =""; 可以预见的是,它会抛出异常.
我该怎么做才能克服这个问题?
我知道我可以在我突出显示的元素中放置一个跨度,然后突出显示该跨度,但我希望我能够避免额外无用的标记.
谢谢!
您可能没有在正确的元素上设置样式.它可能被设置在父节点中的某个位置.
elHighlight.style.backgroundColor = ""; elHighlight.style.backgroundImage = "";
您还可以通过调用以下方法删除所有默认样式:
elHighlight.style.cssText = "";
在任何情况下,您仍然必须在设置这些属性的特定元素上执行此操作,这意味着您可能需要在parentNode上执行递归,直到找到它为止.