468,549 Members | 2,383 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 468,549 developers. It's quick & easy.

default style.backgroundColor value

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.

--
Philip
email-o-mask-o: spam->mouse

Jul 20 '05 #1
1 6414
DU
Philip wrote:
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-Le...le-styleSheets
http://www.w3.org/TR/2000/REC-DOM-Le...Sheet-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/doctorunc...e7Section.html

Jul 20 '05 #2

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

reply views Thread by inquirydog | last post: by
4 posts views Thread by Jeff Anderson | last post: by
5 posts views Thread by johnsuth | last post: by
3 posts views Thread by Rick Brandt | last post: by
3 posts views Thread by alexjaquet | last post: by
5 posts views Thread by Isha | last post: by
reply views Thread by NPC403 | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.