динамическое переключение 'background-image' не работает в IE

Question

Я динамически переключаю фоновое изображение div с битом jquery ниже.Работает просто отлично в FF, но оказывается, что в IE это не так.Есть идеи почему?IE не перезагружает изображение, если свойство css изменилось?Любые указатели будут оценены.

$(function(){
   $('.header').each(function(){
      $(this).hover(function(){
         $('#headertab').css('background-image','url(/tab_'+$(this).attr('href').split('path=')[1]+'.gif');
      });
   });
}); 

Answer 1

Попробуйте установить backgroundImage вместо background-image.

Атрибуты CSS при доступе через Javascript традиционно используют camelCase вместо тире, чтобы избежать вопросов синтаксиса. (element.style.background-image выглядит так, как будто вы делаете вычитание.) Firefox, вероятно, достаточно прогрессивен, чтобы допускать тире, но IE ... кажется, что нет.

Answer 2

У меня была проблема, когда у элемента был предопределенный атрибут стиля, устанавливающий фоновое изображение:

<div id="bg-element" style="background-image: url(foo.jpg);"></div>

Правило фонового изображения можно изменить с помощью jQuery, но изображение не будет обновляться.

Решением было сначала удалить атрибут, а затем снова добавить атрибут с новым значением:

jQuery('#bg-element').removeAttr('style').attr('style', 'background-image: url(bar.jpg);');

Answer 3

Вы неправильно устанавливаете свойства CSS с помощью jquery.Вы можете прочитать здесь как ссылаться на имена свойств (в верблюжьей оболочке, без дефиса).

Answer 4

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

$(function(){
   $('.header').each(function(){
      $(this).hover( function () {
        $('#headertab').addClass('dynamic-background-image-class');
      }, function () {
        $('#headertab').removeClass('dynamic-background-image-class');
      });
   });
}); 

css:

.dynamic-background-image-class {
  background: transparent url(/path/to/image.png) 0 0 no-repeat;
}

Я не знаю, поможет ли это вашей ситуации как изображению вашего заголовкаимена основаны на URL.Одним из преимуществ является то, что изображение извлекается и кэшируется, когда клиент запрашивает файл css.

Answer 5

, если у вас есть пути к изображениям, установленным внутри ЗНАЧЕНИЯ элемента списка SELECT, вы, вероятно, можете использовать:

<select onchange="document.getElementById('background').style.backgroundImage='url(&quot;'+this.value+'&quot;)';">