如何撤销 element.style 属性的设置？

Question

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

当某个事件发生时，我想为该项目制作动画，突出显示它（我使用的是 Scriptaculous，但这个问题适用于任何将执行相同操作的框架）。

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

我面临的问题是，在 animation 完成后，该元素将保留以下样式（根据 FireBug）：

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

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

我想做的是，在 animation 完成后运行的回调 function 中，将样式属性设置为一个值，使它们“消失”。

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 进行递归，直到找到它。

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 class 中。将此 class 添加到您的元素中以突出显示它。 删除 class 以撤消效果。