Question

我正在使用下面的jquery位动态切换div的背景图像。在FF中运行得很好，但在IE中却没有。有什么想法吗？如果css属性发生变化，IE是否重新加载图像？任何指针都会受到赞赏。

$(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

您使用jquery错误地设置了CSS属性。您可以阅读here如何引用属性的名称（camelcased，没有连字符）。

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

Answer 4

如果您在SELECT列表框元素的VALUE中设置了图像路径，则可以使用：

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

Answer 5

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

$(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;
}

我不知道这是否会对您的情况有所帮助，因为您的标题图片名称是基于网址的。其中一个好处是，当客户端请求css文件时，图像被拉出并缓存。

动态切换'background-image'在IE中不起作用

5 个答案: