javascript - 如何通过 JavaScript 确定 div 的背景图片 URL？

Question

我找到了很多关于如何使用 JavaScript 更改 div 的背景图像的信息，但我正在尝试使用 JavaScript 来确定正在显示的背景图像。设置图像的代码如下:

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

我已经尝试了所有我能想到的访问背景图片 url 的组合，但到目前为止还没有成功:

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

但是，我似乎无法访问 URL 属性，直到它被 JavaScript 设置，即使它已经在 CSS 文件中定义。是否存在无法访问原始 CSS 设置的原因？

Answer 1

试试这个:

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