如何撤銷 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 以撤消效果。