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”（或者如何以不同的方式做同样的事情）。我试过'auto'，'inherit'和''（空白字符串），但都没有用（我真的没想到它们可以工作，但我在这里很无能为力。）

我也尝试过：elHighlight.style =“”;可以预见的是，它会抛出异常。

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

谢谢！

Answer 1

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

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

您还可以通过调用

删除所有默认样式

elHighlight.style.cssText = "";

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

Answer 2

尝试
elHighlight.style.removeProperty('background-color') elHighlight.style.removeProperty('background-image')

Answer 3

你试过elHightlight.style.background =“”;？

我的网站上有一个荧光笔代码，这可行

function highlight(id) {
var elements = getElementsByClass("softwareItem");
for (var ix in elements){
    elements[ix].style.background = ""; //This clears any previous highlight
}
document.getElementById(id).style.background = "#E7F3FA";
}

Answer 4

HTML元素可以有多个CSS类。将您的突出显示信息放在CSS类中。将此类添加到元素以突出显示它。删除类以撤消效果。

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

4 个答案: