Determining the Background Colour of an Element

Discussion in 'Javascript' started by Lachlan Hunt, Nov 23, 2005.

  1. Lachlan Hunt

    Lachlan Hunt Guest

    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.
     
    Lachlan Hunt, Nov 23, 2005
    #1
    1. Advertisements

  2. Lachlan Hunt wrote:

    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.
     
    Martin Honnen, Nov 23, 2005
    #2
    1. Advertisements

  3. Lachlan Hunt

    Tony Guest

    The effect I'm trying to achieve is while a user is filling out a form,
    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"
     
    Tony, Nov 23, 2005
    #3
  4. Lachlan Hunt

    Lachlan Hunt Guest

    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;;}
    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.
    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, Nov 24, 2005
    #4
  5. Lachlan Hunt

    Lachlan Hunt Guest

    Thanks, that works in IE and iCab, but not OmniWeb. Plus I still don't
    know about other non-windows or -mac browsers.
     
    Lachlan Hunt, Nov 24, 2005
    #5
    1. Advertisements

Ask a Question

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

You'll need to choose a username for the site, which only take a couple of moments (here). After that, you can post your question and our members will help you out.