default style.backgroundColor value

[Philip]

Hey,

Is it possible to get the default value of an element's
style.backgroundColor property that's set in a css class?

Example, since I'm very tired and can't word that any better

input.example { background-color: #fff }

and the javascript:
var original = document.formname.example.style.backgroundColor;

returns null. Any ideas?

I should stress at this point any hard coded colours are not an option,
since the site is themeable and I don't want to introduce any conflicts.

Thanks in advance.

 

[DU]

Hey,

Is it possible to get the default value of an element's
style.backgroundColor property that's set in a css class?

Example, since I'm very tired and can't word that any better

input.example { background-color: #fff }

You need to know which styleSheets it involves in the ordered collection
of style sheets and which cssRules is involved in the cssRules list.
http://www.w3.org/TR/2000/REC-DOM-L...ts.html#StyleSheets-DocumentStyle-styleSheets
http://www.w3.org/TR/2000/REC-DOM-Level-2-Style-20001113/css.html#CSS-CSSStyleSheet-cssRules

and the javascript:
var original = document.formname.example.style.backgroundColor;

example is a className while formname is presumably the form's name. The
2 refer to 2 different and incompatible interfaces.

returns null. Any ideas?

Assuming the following is your stylesheet (and you only have 1 style sheet):

<style type="text/css">
body {margin:16px; padding:0px; color:black; background-color:white;}
input.example { background-color: #fff }
p#footer img , p#validation img {margin:0 0.5em;}
p#validation img {width:88px; height:31px;}
</style>

then
alert("document.styleSheets[0].cssRules[1].style.backgroundColor = " +
document.styleSheets[0].cssRules[1].style.backgroundColor);
should return/output #fff in DOM 2 CSS compliant browsers. For MSIE 5+,
then use rules instead.
E.g.: show the height value in the last rule:

var heightStyleValue = "unable to process";
if("cssRules" in document.styleSheets[0]) // DOM 2 CSS compliant browsers
{
var heightStyleValue = document.styleSheets[0].cssRules[3].style.height;
}
else if("rules" in document.styleSheets[0]) // MSIE 5+
{
var heightStyleValue = document.styleSheets[0].rules[3].style.height;
};

alert(heightStyleValue);
should alert "31px".

I should stress at this point any hard coded colours are not an option,
since the site is themeable and I don't want to introduce any conflicts.

Thanks in advance.

DU
--
Javascript and Browser bugs:
http://www10.brinkster.com/doctorunclear/
- Resources, help and tips for Netscape 7.x users and Composer
- Interactive demos on Popup windows, music (audio/midi) in Netscape 7.x
http://www10.brinkster.com/doctorunclear/Netscape7/Netscape7Section.html