0

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

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

谢谢！

4

4 回答 4

7

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

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

您还可以通过调用删除所有默认样式：

elHighlight.style.cssText = "";

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

于 2009-01-27T21:29:00.050 回答
2

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

于 2009-01-27T21:44:53.870 回答
0

你试过 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";
}
于 2009-01-27T21:27:53.843 回答
-1

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

于 2009-01-27T21:28:10.630 回答