Setting an element's background = another element's background

Question:
Is there a way to set one div's background or backgroundImage to the value of another div's background or backgroundImage?

Basically, what I'm trying to do is the following, on mouse click:
div0.background = div1.background

I have it working while using
div0.background = 'url(/background/of/div1.jpg)'

but this is causing me problems in another area (described below)
I notice that alert(div0.style.background) returns blank, and this must be why I can't do div0.background=div1.background... but, is there a way to do this? Is my syntax just off?


The following is the actual code I'm using. The line I'm trying to change is defBg.style.background = { 'url...


function rowEvents (elem, prop) {
var y = elem.id.charAt (6);
var z = getObj ('bg' + y + '');
switch (prop) {
case "visible": z.obj.className = 'visible bg'; break;
case "hidden": z.obj.className = 'hidden bg'; break;
case "defaultBg": { var defBg = getObj ('bg0');
defBg.style.background = 'url(/themes/ASIH/Images/FishRep/Large-Footer' + y + '.jpg) center no-repeat'; break; }
default: alert (elem.id); }}


#bg0 is the default background
"elem" is the background I'm trying to set as the default background (#bg0), basically document.getElementById('bg' #) where # is between 1-9
"prop" 'visible' and 'hidden' work fine, as does 'default', but I need it to work in a different manner.

The divs are set up with id of bg#s 1-9, as follows, with #bg0 being the default background:

#bg0, #bg5 { background: url(Images/desert.jpg) center no-repeat; }
#bg1 { background: url(Images/FishRep/Large-Footer1.jpg) center no-repeat;
#bg2 { background: url(Images/FishRep/Large-Footer2.jpg) center no-repeat;
#bg3 { .... etc...

so, y returns the number of the above. This has to be redeclared as when the function runs, (elem) is no longer the same



Thus, what I'm trying to do is have the default background equal the background of the other div, ie:

defBg.style.background = bg#.style.background
where # is the current value of y

The problem I've run into stems from #bg0 and #bg5, which are different urls depending on the screen resolution, (which is declared in a different stylesheet).

I checked alert(element.style.background), and it returns blank, which makes me think that element.style.background isn't the right syntax, or... .something...

So, again, is there anyway to set one div's (#bg0) background equal to that of another div (#bgy)?

Thanks in advance.

I'm pretty sure this is a problem that has seen its way around the forums.

I've never run into it, so I'm not gonna try to solve it with code, but here's a good practical reference to check out. It will probably solve your problem.

http://www.quirksmode.org/dom/getstyles.html

Your syntax is right, it's something about the way styles and javascript work that's the problem.

the syntax is element.style.backgroundImage

when setting:
element.style.backgroundImage="url('yourPicture.jpg')"

you can get the backgroundImage if there is set with no spaces written in the url.
if there is any spaces you must replace them with %20
e.g '../My Pictures/My First Image.jpg'
must be '../My%20Pictures/My%20First%20Image.jpg'

you can 'transfer' the backgroundImage by:
document.getElementById('xxx').style.backgroundImage=document.getElementById('yyy').style.background Image;

I'm pretty sure this is a problem that has seen its way around the forums.

I've never run into it, so I'm not gonna try to solve it with code, but here's a good practical reference to check out. It will probably solve your problem.

http://www.quirksmode.org/dom/getstyles.html

Your syntax is right, it's something about the way styles and javascript work that's the problem.

Thank you. I read through this and quite a bit more, but getPropertyValue and currentStyle aren't working... I'll read up on it tomorrow.



the syntax is element.style.backgroundImage

when setting:
element.style.backgroundImage="url('yourPicture.jpg')"

you can get the backgroundImage if there is set with no spaces written in the url.
if there is any spaces you must replace them with %20
e.g '../My Pictures/My First Image.jpg'
must be '../My%20Pictures/My%20First%20Image.jpg'

you can 'transfer' the backgroundImage by:
document.getElementById('xxx').style.backgroundImage=document.getElementById('yyy').style.background Image;


I wish this were working, but it isn't. I may need to look more closely at how I'm passing the elements around, as I'm using the getObj (elem) function to get the object.

Well, it's working with the following code, now:
..currentStyle is for IE,
..getComputedStyle.getPropertyValue is for Firefox.
* If you use them, note that currentStyle is an OBJECT property, not a style,
* getComputedStyle.getPropertyValue is based off of the document object, not off of 'this' element itself
* Also note that getPropertyValue uses the CSS name, 'background-image' in this case, NOT the Javascript name 'backgroundImage'

again, defBg.obj is because of the getObj function, and basically equates to
document.getElementById('bg0').obj



var defBg = getObj ('bg0');
if (defBg.obj.currentStyle) { defBg.style.backgroundImage = z.currentStyle.backgroundImage; }
else if (window.getComputedStyle) {
defBg.style.backgroundImage =
document.defaultView.getComputedStyle(z,null).getPropertyValue('background-image');


Edit: updated the code to
defBg.style.backgroundImage = z.currentStyle.backgroundImage;
from
defBg.currentStyle[backgroundImage] = z.currentStyle[backgroundImage];
I thought this was working in IE, but the []ed original version doesn't work.

Thanks for the pointer, Beagle