Проблема с изменением свойства BackgroundImage

Question

У меня есть элемент на странице с фоновым изображением установить с помощью CSS:

// CSS snippet 
.mystyle { 
    background-image: url(some_image.gif); 
    // and other styles like width, height, padding, text-align, etc. 
} 

// HTML snippet 
<input type="button" name="mybutton" id="b1" class="mystyle" onclick=" 
some_function();" value="Apply"> 

В функции Javascript, я пытаюсь сделать следующее:

newImage = "url(new_image.gif)"; 
document.getElementById("b1").style.backgroundImage = newImage; 

Это не работает, и старое фоновое изображение исчезает.

Кроме того, при проверке (с помощью оповещений), что свойство BackgroundImage было установлено до и после того, как я изменил его:

newImage = "url(new_image.gif)"; 
alert(document.getElementById("b1").style.backgroundImage); 
document.getElementById("b1").style.backgroundImage = newImage; 
alert(document.getElementById("b1").style.backgroundImage); 

Первое предупреждение показывает пустую (пустую строку), а второе предупреждение показывает newImage URL-адрес.

Так что здесь определенно что-то странное. Я просто не знаю, что. Может ли кто-нибудь помочь?

EDIT: Если, однако, я только изменить атрибут BackgroundColor и установить BackgroundImage к «ни», изменение, кажется, работает просто отлично (значение, то BackgroundImage исчезает, как и раньше, и я могу видеть новый BackgroundColor .

Answer 1

document.getElementById ("b1") .style.backgroundImage = newImage;

Когда вы установите backgroundImage из сценария, URL-адрес является относительно страницы URL Если вы установите.из внешней таблицы стилей, URL-адрес относится к таблице стилей. Разница может привести к тому, что ваш относительный путь указывает на неправильное место. Если вы хотите быть уверенным, используйте корневые URL-адреса.

Первое предупреждение показывает пустой (пустая строка)

Это, как ожидается. Свойство style отражает только содержимое встроенного атрибута style="..." элемента, а не стилей, применяемых косвенно через правила таблиц стилей. Вы можете получить эту информацию менее надежно, просмотрев element.currentStyle в IE или window.getComputedStyle в других браузерах. Или, лучше, используйте Firebug или инспектор DOM в Firefox, чтобы отлаживать, какие правила применяются.

Answer 2

Ok,

Первое предупреждение, что оказалось пустой потому, что, по-видимому (в IE) мне нужно сделать:

alert(document.getElementById(buttonMainId).currentStyle.backgroundImage); 

Чтобы изменить фоновое изображение, мне нужно, чтобы построить полный URL (http://blah/image.gif) чтобы он вступил в силу.