Как я могу определить URL фонового изображения div через JavaScript?

Question

Я нашел много информации о том, как изменить фоновое изображение div с помощью JavaScript, но я пытаюсь использовать JavaScript, чтобы определить, какое фоновое изображение отображается. Код для установки изображения выглядит так:

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

Кто-нибудь знает, как это сделать? Является ли это возможным?

Кстати, вот способ, которым изображение устанавливается в 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 недоступны?

Answer 1

Попробуйте это:

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

Answer 2

Вы устанавливаете свойство background, background и backgroundImage - два отдельных свойства, поэтому backgroundImage пусто после установки background. Если вы хотите получить доступ только к части url свойства background, вы можете использовать следующий код:

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;

Answer 3

Не используйте эти методы. Следите за фоновыми изображениями в массиве, если можете. Различные браузеры будут возвращать разные результаты при попытке получить значение фонового изображения.

Firefox вернет: 'url("../images/someimagefile.jpeg")'

Chrome вернет: 'url("https://www.yourdomain/images/someimagefile.jpeg")'

Просто создаю больше проблем, если вы спросите меня - и неуверенность в ответах браузера - включая планшеты.

• Я использовал вышеописанные методы, пытаясь сначала прочитать имя файла фонового изображения, и это вызвало больше проблем, чем я хотел, в том числе на мобильных устройствах.
• Я переключился на отслеживание того, какие изображения в каком div, используя массив с именами файлов фонового изображения, хранящимися в массив

Answer 4

это должно сделать

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

[РЕДАКТИРОВАТЬ] , как я иду, я добавлю сюда ..
Google Chrome: style['background-image']
Firefox 3.5.7: style.background
IE 6: style.background

style.backgroundImage работают во всех браузерах (IE6, IE7, FF 3.5.7, Google Chrome, Opera 10.10, Safari 4.0.4) для Windows ..

Answer 5

Получить свойство фона:

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

Отображается: URL (включает / images / datepicker_open.png)

Редактировать: ответ Энди Э должен быть близок к тому, что вам нужно. Разница лишь в том, что для IE вам нужно

currentStyle.backgroundImage 

вместо

currentStyle.background