Home/ Questions/Q 114223
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-11T02:49:36+00:00

I have an element in my document that has a background color and image

  • 0

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

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. 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.

    • 0