How can I determine the background image URL of a div via JavaScript?

Question

I've found plenty of information on how to change the background image of a div using JavaScript, but I am trying to use JavaScript to determine which background image is being displayed. The code to set the image goes like this:

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

I have tried every combination I can think of to access the background image url, but so far 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?

BTW, here is the way the image is being set in CSS in 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 seem to access the URL property until it has been set by JavaScript, even though it is already defined in the CSS file. Is there a reason why the raw CSS setting is not accessible?

Answer 1

Try this:

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

Answer 2

You're setting the background property, background and backgroundImage are two seperate properties which is why backgroundImage is empty after setting background. If you want to access just the url 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 documents:

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

The CSS backgorund prop may also include additional attributes as seen on https://developer.mozilla.org/en-US/docs/Web/CSS/background

background: no-repeat url("../../media/examples/lizard.png")

Using a simple img.style.background.slice(4, -1) will give wring results in these cases.

Why not use

/url\(".+"\)/i.exec(img.style.background)[0].replace(/^url\("/i, '').replace(/"\)$/i, '')

where /url\(".+"\)/i is a regex that matches the url("...") part, of which you take the first match with [0] and then replace the initial url(" with replace(/^url\("/i, '') and the ending ") with replace(/"\)$/i, '')