I have an element in my document that has a background color and image set through a regular CSS rule.

When a certain event happens, I want to animate that item, highlighting it (I'm using Scriptaculous, but this question applies to any framework that'll do the same).

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

The problem i'm facing is that after the animation is done, the element is left with the following style (according to FireBug):

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

Which overrides the CSS rule, since it's set at the element level, so I'm losing the background that the item used to have...

What I'm trying to do is, in the callback function I'm running after the animation is done, set the style properties to a value that'll make them "go away".

var fnEndOfFadeOut = function() {
  elHighlight.style.backgroundColor = "xxxxx";
  elHighlight.style.backgroundImage = "xxxxx";
}

What I'm trying to figure out is what to put in "xxxx" (or how to do the same thing in a different way).
I tried 'auto', 'inherit', and '' (blank string), and neither worked (I didn't really expect them to work, but I'm clueless here).

I also tried elHighlight.style = ""; which, expectably, threw an exception.

What can I do to overe this?
I know I can put a span inside the element that I'm highlighting and highlight that span instead, but I'm hoping I'll be able to avoid the extra useless markup.

I have an element in my document that has a background color and image set through a regular CSS rule.

When a certain event happens, I want to animate that item, highlighting it (I'm using Scriptaculous, but this question applies to any framework that'll do the same).

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

The problem i'm facing is that after the animation is done, the element is left with the following style (according to FireBug):

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

Which overrides the CSS rule, since it's set at the element level, so I'm losing the background that the item used to have...

What I'm trying to do is, in the callback function I'm running after the animation is done, set the style properties to a value that'll make them "go away".

var fnEndOfFadeOut = function() {
  elHighlight.style.backgroundColor = "xxxxx";
  elHighlight.style.backgroundImage = "xxxxx";
}

What I'm trying to figure out is what to put in "xxxx" (or how to do the same thing in a different way).
I tried 'auto', 'inherit', and '' (blank string), and neither worked (I didn't really expect them to work, but I'm clueless here).

I also tried elHighlight.style = ""; which, expectably, threw an exception.

What can I do to overe this?
I know I can put a span inside the element that I'm highlighting and highlight that span instead, but I'm hoping I'll be able to avoid the extra useless markup.

• javascript
• css
• animation

Share Improve this question Follow edited Oct 6, 2022 at 21:40 Ry-♦ 226k5656 gold badges493493 silver badges499499 bronze badges asked Jan 27, 2009 at 21:23 Daniel MagliolaDaniel Magliola 32.5k6363 gold badges174174 silver badges246246 bronze badges

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 7

Chances are you're not setting the style on the correct element. It's probably being set somewhere up the line in a parent node.

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

You can also remove all the default styling by calling:

elHighlight.style.cssText = "";

In any case, you'll still have to do this on the specific element that is setting these properties, which means you may need to do a recursion on parentNode until you find it.

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

have you tried elHightlight.style.background = "";?

I have a highlighter code on my site and this works

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";
}

An HTML element can have multiple CSS classes. Put your highlight information inside a CSS class. Add this class to your element to highlight it. Remove the class to undo the effect.