title: How can I determine the background image URL of a div via JavaScript?
body: <p>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: </p>
  
  <pre><code>document.getElementById("widgetField").style.background="url(includes/images/datepicker_open.png)";
  </code></pre>
  
  <p>I have tried every combination I can think of to access the background image url, but so far no dice: </p>
  
  <pre><code>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);
  </code></pre>
  
  <p>Does anyone know how to do this?  Is it possible?  </p>
  
  <p>BTW, here is the way the image is being set in CSS in the beginning: </p>
  
  <pre><code>#widgetField {
      width: 290px;
      height: 26px;
      background: url(../images/datepicker_closed.png);
      overflow: hidden;
      position: relative;
  }
  </code></pre>
  
  <p><strong>UPDATE:</strong></p>
  
  <p>If I run the following, it works: </p>
  
  <pre><code>document.getElementById("widgetField").style.background="url(includes/images/datepicker_open.png)";
  alert(document.getElementById("widgetField").style.background);
  </code></pre>
  
  <p>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?  </p>