如何通過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？

回答

相關問題