Как я могу определить URL фонового изображения отделения через JavaScript?
Я нашел много информации о том, как изменить фоновое изображение отделения, использующего 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);
Кто-либо знает, как сделать это? Действительно ли это возможно?
BTW, вот способ, которым изображение устанавливается в CSS в начале:
#widgetField {
width: 290px;
height: 26px;
background: url(../images/datepicker_closed.png);
overflow: hidden;
position: relative;
}
ОБНОВЛЕНИЕ:
Если я выполняю следующее, это работает:
document.getElementById("widgetField").style.background="url(includes/images/datepicker_open.png)";
alert(document.getElementById("widgetField").style.background);
Однако я, может казаться, не получаю доступ к свойству URL, пока оно не было установлено JavaScript, даже при том, что оно уже определяется в файле CSS. Существует ли причина, почему необработанная установка CSS не доступна?
4 ответа
Попробуйте это:
var img = document.getElementById('widgetField'),
style = img.currentStyle || window.getComputedStyle(img, false),
bi = style.backgroundImage.slice(4, -1);
Получите фоновое свойство:
alert(document.getElementById("widgetField").style.background);
Отображение: URL (включает / Images / datepicker_open.png)
Редактировать: Ответ Andy E должен быть рядом с тем, что вам нужно. Одно отличие состоит в том, что для т. Е. Вам нужно
currentStyle.backgroundImage
вместо
currentStyle.background
Это должно сделать это
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: Стиль [«Фоновое изображение»]
Firefox 3.5.7: style.background
IE 6: Стиль. Backgroundground
Стиль. Работа на всех браузерах Работа на всех браузерах (IE6, IE7, FF 3.5.7, Google Chrome, Opera 10.10, Safari 4.0.4) для Windows ..
Вы устанавливаете свойство 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;