如何通过JavaScript确定div的背景图片网址？ [英] How can I determine the background image URL of a div via JavaScript?

问题描述

我发现了很多关于如何使用JavaScript来改变div的背景图片的信息，但是我想使用JavaScript来确定显示哪个背景图片。设置图片的代码如下：

  document.getElementById（widgetField）。style.background =url include / images / datepicker_open.png）; 
  

我已经尝试过每一种组合，我可以想到访问背景图像url，但到目前为止没有骰子：

  alert（document.getElementById（widgetField）。style.backgroundImage.url）; - 返回未定义
 alert（document.getElementById（widgetField）。style.backgroundImage）; - 空响应
 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： b

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

  document.getElementById（widgetField）。 style.background =url（includes / images / datepicker_open.png）; 
 alert（document.getElementById（widgetField）。style.background）; 
  

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

解决方案

尝试：

  var img = document.getElementById（'widgetField'），
 style = img.currentStyle || window.getComputedStyle（img，false），
 bi = style.backgroundImage.slice（4，-1）; 
  

I've found plenty of information on how to change the background image of a div using JavaScript, but I am trying to use JavaScript to determine which background image is being displayed. The code to set the image goes like this:

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

I have tried every combination I can think of to access the background image url, but so far no dice:

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

Does anyone know how to do this? Is it possible?

BTW, here is the way the image is being set in CSS in the beginning:

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

UPDATE:

If I run the following, it works:

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

However, I cannot seem to access the URL property until it has been set by JavaScript, even though it is already defined in the CSS file. Is there a reason why the raw CSS setting is not accessible?

解决方案

Try this:

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

这篇关于如何通过JavaScript确定div的背景图片网址？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！