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

【问题标题】：Javascript: How can I undo the setting of element.style?Javascript：如何撤消 element.style 的设置？
【发布时间】：2010-10-03 20:59:15
【问题描述】：

我的文档中有一个元素，它通过常规 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 = "";不出所料，这引发了异常。

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

谢谢！

【问题讨论】：

标签： javascript css animation

【解决方案1】：

你试过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";
}

【讨论】：

我没有尝试过，但我按照 David 的建议使用 CssText = ""，这对我来说更好，因为它可以清除所有内容。

【解决方案2】：

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

【讨论】：

不，这行不通。我正在做的亮点是一个动画，所以我不能通过 CSS 类来做。
为什么不呢？您可以更改 css 类的属性来创建动画。
因为我正在使用Scriptaculous 来做动画，而且我不打算编写自己的动画工具，或者为此更改scriptaculous。我知道你的答案是最正确的，但在大多数情况下它是不切实际的（或者可能只是脚本，我不知道其他动画库是如何做到的）

【解决方案3】：

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

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

您也可以通过调用 all 删除默认样式：

elHighlight.style.cssText = "";

无论如何，您仍然需要对设置这些属性的特定元素执行此操作，这意味着您可能需要对 parentNode 进行递归，直到找到它。

【讨论】：

你太棒了！将属性设置为 "" 不起作用（尝试过），但 cssText = "" 就像一个魅力！谢谢！

【解决方案4】：

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

【讨论】：