473,387 Members | 1,621 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,387 software developers and data experts.

How to access the background color of a div element ?

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.

Dec 12 '06 #1
3 4215
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" <ya******@gmail.comwrote in message
news:11*********************@l12g2000cwl.googlegro ups.com...
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.

Dec 12 '06 #2
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
Dec 12 '06 #3


SECOND!

:D

---------------------------------------------------------------------------
http://www.hunlock.com
$FA
Dec 12 '06 #4

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

11
by: George Hester | last post by:
I have a css file this is a portion of it: /* trackaccept.css */ div.track { width:400px; height: 100px; } I have this in my ASP page:
12
by: Stanimir Stamenkov | last post by:
Here are two cases regarding inline-level elements' line-height, padding and background, which I doesn't understand: <div style="background: black; color: white; line-height: 1.5">...
1
by: CMAR | last post by:
I have a design of a frameless page on my practice website: http://home.ne.rr.com/thespar/designerN.htm The idea is to have a #left navigation bar which is absolutely positioned and which...
11
by: Konrad Den Ende | last post by:
I have a function returning a string but the problem is that the color of it is blue which suits me well for some pages but not for others. Is it possible to "feel" what the color of the background...
4
by: Keon | last post by:
Hoi Do someone know how i can make the background of a iframe transparancy? I already tried it with filter: Alpha(Opacity=50,); but it also make the text transperancy. do someone know how to...
4
by: coolsti | last post by:
I have been playing around with this task for some hours now, and can't seem to find a way. I have an assortment of buttons on a web page, which have their background colors defined via style...
13
by: Giggle Girl | last post by:
Hi there, I need to use a background image in a TR that does NOT restart everytime it hits a TD. Can it be done? Specifically, if you set a background image for an entier table, now mater how...
7
by: Paul Wake | last post by:
I'm missing something regarding positioning background images. It's probably obvious, and I hope someone here will note it for me. I'm trying to do something like the complex spiral thing, only...
19
by: david.karr | last post by:
If in my CSS I set the "background-color" property on the "body" element, it only covers the background of the elements defined in the body, up to the current width and height of the page. However,...
0
by: taylorcarr | last post by:
A Canon printer is a smart device known for being advanced, efficient, and reliable. It is designed for home, office, and hybrid workspace use and can also be used for a variety of purposes. However,...
0
by: Charles Arthur | last post by:
How do i turn on java script on a villaon, callus and itel keypad mobile phone
0
by: ryjfgjl | last post by:
If we have dozens or hundreds of excel to import into the database, if we use the excel import function provided by database editors such as navicat, it will be extremely tedious and time-consuming...
0
by: ryjfgjl | last post by:
In our work, we often receive Excel tables with data in the same format. If we want to analyze these data, it can be difficult to analyze them because the data is spread across multiple Excel files...
0
BarryA
by: BarryA | last post by:
What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...
0
by: Hystou | last post by:
There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...
0
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...
0
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...
0
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.