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