¿Cómo puedo determinar la URL de la image de background de un div a través de JavaScript?

He encontrado mucha información sobre cómo cambiar la image de background de un div usando JavaScript, pero estoy tratando de usar JavaScript para determinar qué image de background se está mostrando. El código para establecer la image es así:

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

He intentado todas las combinaciones que se me ocurren para acceder a la url de la image de background, pero hasta ahora no he dicho nada:

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

¿Alguien sabe como hacer esto? ¿Es posible?

Por cierto, aquí está la forma en que se establece la image en CSS al principio:

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

ACTUALIZAR:

Si ejecuto lo siguiente, funciona:

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

Sin embargo, parece que no puedo acceder a la propiedad URL hasta que se haya establecido mediante JavaScript, aunque ya esté definida en el file CSS. ¿Hay alguna razón por la cual la configuration CSS sin formatting no es accesible?

Prueba esto:

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

Estás configurando la propiedad background , background y backgroundImage son dos properties separadas, por lo que backgroundImage está vacío después de configurar el background . Si desea acceder solo a la parte url de la propiedad de background, puede usar el siguiente código:

 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 } 

Para styles establecidos por documentos 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; 

esto debería hacerlo

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

Puede hacer lo siguiente para get todas las properties de estilo una vez que haya realizado los cambios … para que vea dónde van las cosas nuevas …

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

[EDITAR] a medida que avanzo añadiré aquí …
Google Chrome: style['background-image']
Firefox 3.5.7: style.background
IE 6: style.background

style.backgroundImage funciona en todos los browseres (IE6, IE7, FF 3.5.7, Google Chrome, Opera 10.10, Safari 4.0.4) para Windows.

Obtener la propiedad de background:

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

Muestra: url (includes / images / datepicker_open.png)

Editar: la respuesta de Andy E debe estar cerca de lo que necesitas. Una diferencia es que para IE necesitas

 currentStyle.backgroundImage 

en lugar de

 currentStyle.background 

No use estos methods. Mantenga un logging de las imágenes de background en una matriz si puede. Los diferentes browseres mostrarán resultados diferentes cuando intenten get el valor de la image de background.

Firefox devolverá: 'url("../images/someimagefile.jpeg")'

Chrome devolverá: 'url("http://img.javascriptes.com/javascript/someimagefile.jpeg")'

Solo crear más problemas si me preguntas, e incertidumbre con las respuestas del browser, incluidas las tabletas.

  • Usé los methods anteriores para tratar de leer el nombre del file de image de background primero, y causaron más problemas de los que yo quería, incluso en dispositivos mobilees.
  • Cambié a un seguimiento de qué imágenes están en qué div, mediante el uso de una matriz con los nombres de file de la image de background almacenados en la matriz