How to determine the background image url of a div using javascript?

Question

I found a lot of information on how to change the background image of a div using JavaScript, but I'm trying to use JavaScript to determine which background image is displayed. The code for setting the image is as follows:

document.getElementById("widgetField").style.background="url(includes/images/datepicker_open.png)"; 

I tried every combination that I can come up with to access the url of the background image, but still no dice:

 alert(document.getElementById("widgetField").style.backgroundImage.url); - returns Undefined alert(document.getElementById("widgetField").style.backgroundImage); - empty response alert(document.getElementById("widgetField").style.background); alert(document.getElementById("widgetField").style.background.image); alert(document.getElementById("widgetField").style.background.url); alert(document.getElementById("widgetField").style.background.image.url); alert(document.getElementById("widgetField").style.background.value); alert(document.getElementById("widgetField").style.background.image.value); alert(document.getElementById("widgetField").style.background.image.value); alert(document.getElementById("widgetField").style.backgroundImage.value); 

Does anyone know how to do this? Is it possible?

By the way, here is how the image is set in CSS at the beginning:

 #widgetField { width: 290px; height: 26px; background: url(../images/datepicker_closed.png); overflow: hidden; position: relative; } 

UPDATE:

If I run the following, it works:

 document.getElementById("widgetField").style.background="url(includes/images/datepicker_open.png)"; alert(document.getElementById("widgetField").style.background); 

However, I cannot access the URL property until it is set by JavaScript, even if it is already defined in the CSS file. Is there a reason the original CSS setting is not available?

Answer 1

Try the following:

 var img = document.getElementById('widgetField'), style = img.currentStyle || window.getComputedStyle(img, false), bi = style.backgroundImage.slice(4, -1); 

Answer 2

You set the background property, background and backgroundImage are two separate properties, so backgroundImage empty after setting background . If you want to access only the source part of the background property, you can use the following code:

 var wfBg = document.getElementById("widgetField").style.background; var wfBgUrl = wfBg.match(/(url\(['"]?([^)])['"]?\))/i); if (wfBgUrl) { // Add your code here. wfBgUrl[1] is full string including "url()", // wfBgUrl[2] would be just the url inside the parenthesis } 

For styles set by css docs:

 if (window.getComputedStyle) // For standards compliant browsers var wfBg = window.getComputedStyle( document.getElementById("widgetField") ).getPropertyValue("background"); else // for IE var wfBg = document.getElementById("widgetField").currentStyle.background; 

Answer 3

Get the background property:

 alert(document.getElementById("widgetField").style.background); 

Displays: url (includes / images / datepicker_open.png)

Edit: Andy E's answer should be close to what you need. One of the differences is that for IE you need

 currentStyle.backgroundImage 

instead

 currentStyle.background 

Answer 4

it should do it

 alert( document.getElementById("widgetField").style['background-image'] ); 

You can do the following to get all the style properties after making changes ... so you see where the new things went ...

  var style = document.getElementById("widgetField").style; var allprops = ''; for ( i in style ) allprops += style[i] + ':' + i + '\n' ; alert( allprops ); 

[EDIT] as I go, I will add here ..
Google Chrome: style['background-image']
Firefox 3.5.7: style.background
IE 6: style.background

style.backgroundImage works with all browsers (IE6, IE7, FF 3.5.7, Google Chrome, Opera 10.10, Safari 4.0.4) for Windows ..

Answer 5

Do not use these methods. Watch out for background images in the array if you can. Different browsers return different results when trying to get the value of a background image.

Firefox will return: 'url("../images/someimagefile.jpeg")'

Chrome will return: 'url("https://www.yourdomain/images/someimagefile.jpeg")'

Just create more problems if you ask me - and uncertainty with browser responses, including tablets.

• I used the above methods to read the background image file name first, and they caused more problems than I wanted - including on mobile devices.
• I switched to tracking images in which the div is using an array with the background image file names stored in the Array