#1
  1. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2002
    Posts
    55
    Rep Power
    12

    accessing style backgroundColor from javascript


    Hi all,

    I'm a bit of a noob :confused:, My question is this: how can I access the background color of chi_0_0?

    I have a style called

    #chi_0_0 {position:absolute; left:0; top:0; background-color:"#00ff00"; width=8; height=8; text-align:center;}

    Later on I have a div element like so:

    <div id="chi_0_0" onmouseover="javascript:setpreviewcolor(this.style.backgroundColor)"></div>

    The element displays on the screen with the right color (#00ff00). I want to pass the background color of the element into the Javascript function setpreviewcolor, to change other elements to the same color.

    But chi_0_0.style.backgroundColor is undefined inside the function "setpreviewcolor".

    How can I access the background color of chi_0_0?

    Thanks in advance,
    Merl
  2. #2
  3. No Profile Picture
    Senior Citizen
    Devshed Regular (2000 - 2499 posts)

    Join Date
    Jan 2001
    Location
    leftcoast
    Posts
    2,019
    Rep Power
    16
    Couple of things:

    Haven't got a 'style' there called 'chi_0_0' - that's an element, identified by its unique id; in CSS, it becomes a selector, referencing the element you want the styles applied to.

    Presumably the reason this.style.backgroundColor isn't being passed (if that's the problem) is that you havent assigned your CSS inline - in the HTML itself:

    <div id="chi_0_0" style="background-color:#00ff00;"....>

    Since the .style property/object you're trying to get the background-color value from is the JavaScript equivalent of the inline style attribute, if you don't set the second, you won't get anything out of the first. Styles do cascade down from 'above' on elements - the basic point of CSS - but they don't get magically written into the element's .style property if you assign them in global style sheets. IE5+ has a (proprietary) .currentStyle property - read-only - which does generally hold the cascaded style. Try it and see:

    setpreviewcolor(this.currentStyle.backgroundColor)

    The newer CSS (DOM2) - still spottily implemented - will provide methods for all this, principally a .getComputedStyle() method which doesn't rely on the .style object solely for its data.

    Also - watch your CSS syntax:

    #chi_0_0 {position:absolute; left:0px; top:0px; background-color:#00ff00; width:8px; height:8px; text-align:center;}

    Values aren't quoted, unless they're more than one word. This is CSS - not JS. And use colons (:), not equals signs (=) - those are for inline CSS.

    http://www.faqts.com/knowledge_base/...d/1780/fid/128

    http://www.faqts.com/knowledge_base/...d/1938/fid/128

    hth, adios
    Last edited by adios; August 15th, 2002 at 06:29 PM.
  4. #3
  5. No Profile Picture
    CF sMod
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2000
    Location
    Maine, USA (a.k.a. Boonies)
    Posts
    242
    Rep Power
    15
    See this for a quick run down of using DOM2 CSS for gecko, and IE's proprietary add ons:

    http://www.webxpertz.net/forums/show...threadid=18447
    Jason Contact Me
    Super moderator @ CodingForums
  6. #4
  7. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2002
    Posts
    55
    Rep Power
    12
    Hey, thanks for your replies.

    The stylesheet didn't use px because I templated it on a tutorial.

    This is what i'm using now.
    #chi_0_0 {position:absolute; left:0px; top:0px; background-color:"#00ff00"; width=15px; height=15px; text-align:center;}

    <div id="chi_0_0" left=0 top=0 backgroundColor="#00ff00" width=15 height=15 onmouseover="javascript:setpreviewcolor()" onclick="javascript:setselectedcolor()"></div>

    I managed to fix it by putting the starting backgroundColor into the div explicitly when the script is generated. Then subsequent javascript functions could see the already defined values. Inside the javascript function I'm using window.event.srcElement to access the calling object (and it's colour).

    Thanks for you help,
    Merl

IMN logo majestic logo threadwatch logo seochat tools logo