views:

413

answers:

4

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 its 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 overcome 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.

Thanks!

A: 

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";
}
Grant
I didn't try that, but I'm using CssText = "" as suggested by David, which is better in my case, since it clears everything away.
Daniel Magliola
A: 

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.

Eduard Wirch
No, that won't work. The highlight i'm doing is an animation, so I can't do it through a CSS class.
Daniel Magliola
Why not? You can change the attributes of the css class to create your animation.
Eduard Wirch
Because i'm using Scriptaculous to do the animation, and I'm not planning to write my own animation tool, or change scriptaculous for this.I know your answer is the most correct, but it's impractical in most cases (or maybe just with scriptaculous, i don't know how other animation libs do it)
Daniel Magliola
+4  A: 

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.

David Morton
You rock so much!Setting the properties to "" didn't work (had tried that), but cssText = "" worked like a charm!. Thank you!
Daniel Magliola
A: 

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

Chetan Sastry