如何通过JavaScript确定div的背景图片网址？

Question

我发现了很多关于如何使用JavaScript更改div的背景图像的信息,但我尝试使用JavaScript来确定正在显示哪个背景图像.设置图像的代码如下:

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

我已经尝试了我能想到的每个组合来访问背景图片网址,但到目前为止还没有骰子:

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);

有谁知道如何做到这一点？可能吗？

顺便说一句,这是在开始时在CSS中设置图像的方式:

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

更新:

如果我运行以下命令,它可以工作:

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

但是,在JavaScript设置之前,我似乎无法访问URL属性,即使它已在CSS文件中定义.是否有原因无法访问原始CSS设置？

Answer 1

试试这个:

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