default style.backgroundColor value

Discussion in 'Javascript' started by Philip, Sep 19, 2003.

  1. Philip

    Philip Guest

    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
     
    Philip, Sep 19, 2003
    #1
    1. Advertising

  2. Philip

    DU Guest

    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-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
     
    DU, Sep 19, 2003
    #2
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. LeftHorn
    Replies:
    11
    Views:
    1,135
    Blinky the Shark
    Apr 1, 2006
  2. Cliff Cotterill

    DropDownList BackgroundColor not set

    Cliff Cotterill, Nov 15, 2007, in forum: ASP .Net
    Replies:
    10
    Views:
    781
    Juan T. Llibre
    Nov 16, 2007
  3. André
    Replies:
    4
    Views:
    481
    André
    Jun 19, 2008
  4. RobG

    backgroundColor and Firefox

    RobG, Nov 3, 2004, in forum: Javascript
    Replies:
    1
    Views:
    129
    Thomas 'PointedEars' Lahn
    Dec 12, 2004
  5. cosmic foo

    backgroundColor

    cosmic foo, Jul 24, 2005, in forum: Javascript
    Replies:
    13
    Views:
    223
    Richard Cornford
    Jul 25, 2005
Loading...

Share This Page