How to access the background color of a div element ?

Discussion in 'Javascript' started by Yashesh Bhatia, Dec 12, 2006.

  1. Hi

    Sorry if it's a trivial question. I'm a newbie to js and did some
    reading since the last 3-4 hrs but have not been able to get the
    answers, hence this post.

    essentially i'm trying to access the bacground color of a div which i
    need to use in javascript.

    here are my files

    ------------------- test1.html --------------------------------------
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title>Test1</title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <SCRIPT type="text/javascript" src="test1.js"></script>
    <LINK href="test1.css" rel="stylesheet" type="text/css">
    <script type="text/javascript">
    window.onload = f1;
    </script>
    </head>
    <body>
    <div id="div1">
    <h1>Communities</h1>
    Indus Valley Civilization<p>
    Walt Disney<p>
    Goa as a tourist destination ?<p>
    Programming in Javascript & CSS ?<p>
    World is Flat<p>
    </div>
    <div id="div2">
    <h1>Events</h1>
    Down but not out ?<p>
    Car rally down south<p>
    5k AIDS awareness run<p>
    go for the gold<p>
    Introspection<p>
    </div>
    </body>
    </html>
    -----------------------------------------------------------------------
    ------------------- test1.css --------------------------------------
    #div1 {
    background-color:#FF0000;
    }

    #div2 {
    background-color:#00FFFF;
    }
    -----------------------------------------------------------------------
    ------------------- test1.js ----------------------------------------
    function f1() {
    alert("Entering function f1");

    var div1 = document.getElementById('div1');
    for(property in div1) {
    //alert(property + ' = ' + div1.property);
    }

    var div1_bg_color = div1.style.backgroundColor;
    alert("div1 = " + div1);
    alert("div1_bg_color = " + div1_bg_color);

    }
    -----------------------------------------------------------------------

    Now when i run the above script i get the following relevant popups
    div1 = [object HTMLDivElement]
    div1_bg_color =

    My question is how can i access the background color of div1 in
    javascript and store it as a string variable ? I'n using Firefox 1.5

    Thanks for assistance.

    Yashesh Bhatia.
    Yashesh Bhatia, Dec 12, 2006
    #1
    1. Advertising

  2. Re: How to access the background colour of a div element ?

    Oooh! Ooh! I can answer this one! Let me! Let me!!!

    The object is referenced thusly:

    document.getElementById( 'the_id_of_your_div' ).style.backgroundColor

    In a basic function it would be;

    function the_crunge()
    {
    document.getElementById(
    'wheres_that_confounded_bridge' ).style.backgroundColor="#000000";
    }

    to make the background colour black. I hope it will be useful.

    John Bonham


    "Yashesh Bhatia" <> wrote in message
    news:...
    > Hi
    >
    > Sorry if it's a trivial question. I'm a newbie to js and did some
    > reading since the last 3-4 hrs but have not been able to get the
    > answers, hence this post.
    >
    > essentially i'm trying to access the bacground color of a div which i
    > need to use in javascript.
    >
    > here are my files
    >
    > ------------------- test1.html --------------------------------------
    > <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    > "http://www.w3.org/TR/html4/strict.dtd">
    > <html>
    > <head>
    > <title>Test1</title>
    > <meta http-equiv="content-type" content="text/html; charset=utf-8">
    > <SCRIPT type="text/javascript" src="test1.js"></script>
    > <LINK href="test1.css" rel="stylesheet" type="text/css">
    > <script type="text/javascript">
    > window.onload = f1;
    > </script>
    > </head>
    > <body>
    > <div id="div1">
    > <h1>Communities</h1>
    > Indus Valley Civilization<p>
    > Walt Disney<p>
    > Goa as a tourist destination ?<p>
    > Programming in Javascript & CSS ?<p>
    > World is Flat<p>
    > </div>
    > <div id="div2">
    > <h1>Events</h1>
    > Down but not out ?<p>
    > Car rally down south<p>
    > 5k AIDS awareness run<p>
    > go for the gold<p>
    > Introspection<p>
    > </div>
    > </body>
    > </html>
    > -----------------------------------------------------------------------
    > ------------------- test1.css --------------------------------------
    > #div1 {
    > background-color:#FF0000;
    > }
    >
    > #div2 {
    > background-color:#00FFFF;
    > }
    > -----------------------------------------------------------------------
    > ------------------- test1.js ----------------------------------------
    > function f1() {
    > alert("Entering function f1");
    >
    > var div1 = document.getElementById('div1');
    > for(property in div1) {
    > //alert(property + ' = ' + div1.property);
    > }
    >
    > var div1_bg_color = div1.style.backgroundColor;
    > alert("div1 = " + div1);
    > alert("div1_bg_color = " + div1_bg_color);
    >
    > }
    > -----------------------------------------------------------------------
    >
    > Now when i run the above script i get the following relevant popups
    > div1 = [object HTMLDivElement]
    > div1_bg_color =
    >
    > My question is how can i access the background color of div1 in
    > javascript and store it as a string variable ? I'n using Firefox 1.5
    >
    > Thanks for assistance.
    >
    > Yashesh Bhatia.
    >
    Private Cow of Funk, Dec 12, 2006
    #2
    1. Advertising

  3. Yashesh Bhatia

    Matt Kruse Guest

    Re: How to access the background colour of a div element ?

    Private Cow of Funk wrote:
    > Oooh! Ooh! I can answer this one! Let me! Let me!!!


    But your answer isn't correct :)

    > The object is referenced thusly:
    > document.getElementById( 'the_id_of_your_div' ).style.backgroundColor


    Only if the background color was set explicitly in the style attribute of
    the object.
    Plus, isn't this exactly what the OP posted, which didn't work?

    The answer is, there are a couple different things you need to check to get
    the right answer, since the background color may have been set by inline
    styles, a class, or because of some other css rule. What you really need to
    know is what bg color is currently _applied_ to the object.

    For this, see my simple wrapper:

    CSS.getStyle(obj, "background-color");

    which can be found here, along with my other "util" functions:

    http://www.JavascriptToolbox.com/lib/util/

    The benefit of a general wrapper function is that it will normalize
    differences in browsers and handle special cases like "float" and some
    browsers returning "red" while others return "#ff0000".

    --
    Matt Kruse
    http://www.JavascriptToolbox.com
    http://www.AjaxToolbox.com
    Matt Kruse, Dec 12, 2006
    #3
  4. Yashesh Bhatia

    pcx99 Guest

    Re: How to access the background colour of a div element ?

    SECOND!

    :D

    ---------------------------------------------------------------------------
    http://www.hunlock.com
    $FA
    pcx99, Dec 12, 2006
    #4
    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. jc
    Replies:
    3
    Views:
    1,712
  2. fig000
    Replies:
    0
    Views:
    4,531
    fig000
    Sep 6, 2004
  3. Kamaljeet Saini
    Replies:
    0
    Views:
    377
    Kamaljeet Saini
    Feb 13, 2009
  4. CRPietschmann
    Replies:
    1
    Views:
    217
    marss
    Apr 28, 2006
  5. Replies:
    1
    Views:
    257
    marss
    Feb 14, 2007
Loading...

Share This Page