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

我发现很多关于如何使用JavaScript更改div的背景图片的信息，但我正在尝试使用JavaScript来确定显示哪个背景图片。设置图像的代码是这样的：如何通过JavaScript确定div的背景图片URL？

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

有谁知道去做这个？可能吗？

BTW，这里是图像在CSS被设置在一开始的方式：

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

UPDATE：

如果我运行下面的，它的工作原理：

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

但是，我似乎无法访问URL属性，直到它已被JavaScript设置，即使它已经在CSS文件中定义。有没有原因为什么原始CSS设置不可访问？

来源

2010-01-20 user77413

背景图像文件名称的数组，你试过'.style.background'，而不是'切换到跟踪其中的图像是在DIV，通过。 style.backgroundImage'？ – kennytm 2010-01-20 19:13:24

是的，我试过style.background，style.background.image，style.background.url，style.background.image.url，style.background.value，style.background.image.value，style.backgroundImage.value以及。谢谢。 – user77413 2010-01-20 19:18:14

@openid_kenja：您需要获取元素的计算样式 - 请参阅我的更新答案。 – 2010-01-20 19:37:51

试试这个：

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

来源

2010-01-20 20:11:42 Mic

简单。优雅。作品。感谢大家的帮助！ – user77413 2010-01-20 21:43:58

你设置background财产，background和backgroundImage是两个不同的特性，这就是为什么backgroundImage是设置background后空。如果您要访问只是背景属性的URL部分，你可以使用下面的代码：

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 
}

对于由CSS文件设置样式：

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;

来源

2010-01-20 19:15:38

我试过通过背景和backgroundImage属性来访问它，并且都没有返回任何东西。顺便说一句，我已经更新了原始问题，以包括如何在开始时设置CSS。谢谢。 – user77413 2010-01-20 19:29:28

在这种情况下，您需要在IE中使用'currentStyle'，在其他浏览器中使用'getComputedStyle（）'。 – 2010-01-20 19:36:54

获取背景属性：

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

显示：URL（包括/图片/ datepicker_open.png）

编辑：安迪·E公司的swer应该接近你所需要的。一个区别是，IE浏览器，你需要

currentStyle.backgroundImage

，而不是

currentStyle.background

来源

2010-01-20 19:16:08 rosscj2533

这是返回空。 – user77413 2010-01-20 19:24:51

这应该这样做

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

你可以把所有的样式属性下面你做后改变...所以你看到新东西去哪里...

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

[编辑]我一起去，我会在这里补充..
谷歌浏览器： style['background-image']
火狐3.5。7： style.background
IE 6： style.background

style.backgroundImage在所有Windows浏览器（IE6，IE7，FF 3.5.7，谷歌浏览器，歌剧10.10，Safari浏览器4.0.4）工作..

来源

2010-01-20 19:20:56

这是返回未定义。 – user77413 2010-01-20 19:24:06

它适用于铬，但确实FF失败.. – 2010-01-20 19:29:27

我已经在上面添加了一些情况.. – 2010-01-20 19:35:49

请勿使用这些方法。如果可以，请跟踪数组中的背景图像。尝试获取背景图像值时，不同的浏览器将返回不同的结果。

Firefox将返回：'url("../images/someimagefile.jpeg")'

Chrome浏览器将返回：'url("https://www.yourdomain/images/someimagefile.jpeg")'

只是创造更多的问题，如果你问我 - 不确定性与浏览器的响应 - 包括平板电脑。

我使用上述方法试图先读取背景图像文件名，并且它们造成了比我想要的更多的问题 - 包括在移动设备上。
我使用与存储在阵列

来源

2012-12-28 23:08:05 KDawg

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

回答

相关问题