Determining the Background Colour of an Element

[Lachlan Hunt]

Hi,
I'm looking for an interoperable method of determining the current
background colour of an element that is set using an external
stylesheet. I've tried:

elmt.style.backgroundColor;

but that only works if the colour has been set using the style attribute
or previously set using script. I've also tried:

document.defaultView.getComputedStyle(elmt,
null).getPropertyValue("background-color");

That gives me the right result in Firefox, Opera and Safari, but it
fails in IE6, iCab and OmniWeb. Is there an interoperable method of
getting this style information?

The effect I'm trying to achieve is while a user is filling out a form,
required fields have a light yellow background, correctly filled out
fields have a white background and incorrectly filled out fields will
have a dark red background.

As the user fills out the form, client-side validation will occur and
fields will fade between 3 different colours, each representing required
fields (light yellow), error (dark red) or correct (white).

e.g. if they make a mistake such as an invalid e-mail address, the
background colour will fade from the current colour (either yellow or
white) to red. It's possible for fields to fade between any combination
of these colours.

I've already written the script that will fade between any two colours I
give it, I just need a way to determine the colours to fade between. I
know I could hard code the colours in the script, but if the colours are
changed later in the CSS, I wanted the script to keep working as
expected without modification, if that's at all possible.

 

[Martin Honnen]

Lachlan Hunt wrote:

document.defaultView.getComputedStyle(elmt,
null).getPropertyValue("background-color");

That gives me the right result in Firefox, Opera and Safari, but it
fails in IE6, iCab and OmniWeb. Is there an interoperable method of
getting this style information?

No idea about iCab or OmniWeb but IE since IE 5 has
element.currentStyle.backgroundColor
respectively in general
element.currentStyle.cssPropertyName
which is usually what you can use with IE instead of the W3C DOM Level 2
getComputedStyle.

 

[Tony]

The effect I'm trying to achieve is while a user is filling out a form,

required fields have a light yellow background, correctly filled out
fields have a white background and incorrectly filled out fields will
have a dark red background.

It seems from that description that the background-color should be
defined from the outset, then. All you would need to do is add a CSS
definition for the default background-color (ie for the non-required
fields), then all fields would have a background-color defined.

You could also change the colors by changing the CLASS, and define
those classes in CSS - that way, the colors aren't hard-coded into the
script, as you wanted. In fact, you never even need to know what the
colors are, or even if they're defined.

BTW, that would be element.className = "newClassName"

 

[Lachlan Hunt]

You could also change the colors by changing the CLASS, and define
those classes in CSS

In the CSS, there is already styles like this:

..required {background: #FFC url(icon-required) right center no-repeat;}
..error {background: #F33 url(icon-error) right center no-repeat;;}

that way, the colors aren't hard-coded into the script, as you wanted.
In fact, you never even need to know what the colors are, or even if
they're defined.

In order to do the fading effect, the script is given the start and end
colours, generates a pallet of colours in between and uses a timer to
step through and set the background to the each one. e.g. given those
start and end colours, the script generates a pallet like the following
(the actual script uses more steps than this, but this is just an example):

#FFFFCC
#FFDDB3
#FFBB99
#FF9980
#FF7766
#FF554D
#FF3333

At each interval, it sets element.style.backgroundColor = pallet[step];

To clarify, the problem I was trying to solve is for the script to
determine these start and end colours from the stylesheet. At the
moment, in order to to it interoperably, I have to set define the
colours within the script.

BTW, that would be element.className = "newClassName"

Doing just that will not fade the colour smoothly, it will just
immediately switch from the start colour to the end colour, which is not
what the client wants. Although, the script will still change the class
name, as they're also used to add the appropriate icons.

 

[Lachlan Hunt]

No idea about iCab or OmniWeb but IE since IE 5 has
element.currentStyle.backgroundColor

Thanks, that works in IE and iCab, but not OmniWeb. Plus I still don't
know about other non-windows or -mac browsers.