动态切换“背景图像”在IE中不起作用

尝试设置 backgroundImage 而不是 background-image .

当通过javascript访问CSS属性时,传统上使用camelcase而不是破折号来避免语法问题。( element.style.background-image 看起来你在做减法。)火狐很可能是渐进的,可以允许破折号,但也就是说…似乎不是。

我遇到一个问题,一个元素有一个预先定义的样式属性来设置背景图像:

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

可以使用jquery更改背景图像规则,但图像不会更新。

解决方案是先删除该属性,然后使用新值再次添加该属性:

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

您使用jquery错误地设置了css属性。你可以阅读 here 如何引用属性的名称(camelcased,不带连字符)。

$("#element").css({"backgroundImage":"url(/images/image.jpg)",....etc})

如果在select listbox元素的值内设置了图像路径,则可以使用:

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

我通常使用类名来处理这类事情:

$(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文件时,图像被提取和缓存。