使用jQuery设置特定于浏览器的CSS属性

时间:2011-11-05 12:45:47

标签: javascript jquery css css3 background-image

我正在尝试修改background-image属性中的渐变值,我不能:(

  data = 'ff55dd';
  $(".el").css({
    'background-image' : '-webkit-gradient(linear, left top, left bottom, from(#' + data + '), to(#aa1133))',
    'background-image' : '-webkit-linear-gradient(#' + data + ', #aa1133)',
    'background-image' : '-moz-linear-gradient(#' + data + ', #aa1133)',
    'background-image' : '-o-linear-gradient(top, #ff3345, #aa1133)',
    'background-image' : '-khtml-gradient(linear, left top, left bottom, from(#' + data + '), to(#aa1133))',
    'filter'           : 'progid:DXImageTransform.Microsoft.gradient(startColorstr=\'#' + data' + '\', endColorstr=\'#aa1133\', GradientType=0)',
    'background-image' : 'linear-gradient(#ff5534, #aa1133)'
  });

什么都没发生.....

2 个答案:

答案 0 :(得分:4)

如果你把它们全部放在一起,看起来它会覆盖规则。

我一个接一个地添加它们似乎有效。

    $(".e1")
      .css('background-image','-webkit-gradient(linear, left top, left bottom, from(#' + data + '), to(#aa1133))')
      .css('background-image','-webkit-linear-gradient(#' + data + ', #aa1133)')
      .css('background-image','-moz-linear-gradient(#' + data + ', #aa1133)')
      ...

答案 1 :(得分:1)

这不起作用。为什么?因为在调用“.css()”时你实际上并没有编写CSS代码,所以你正在编写JavaScript代码。在对象常量中,当您为同一属性名称提供许多不同的值时,在“.css()”代码实际将对象作为参数时,您将只得到一个属性。因此,只保留您设置的最后一个“背景图像”值。所有其他人都将被覆盖。

换句话说,您的代码等同于:

$(".el").css({
    'filter'           : 'progid:DXImageTransform.Microsoft.gradient(startColorstr=\'#' + data + '\', endColorstr=\'#aa1133\', GradientType=0)',
    'background-image' : 'linear-gradient(#ff5534, #aa1133)'
});

我怀疑除了直接将“style”属性设置为完整的CSS块,以将CSS写入构造的<style>之外,还有任何方法可以通过jQuery执行此操作。您添加到DOM的元素。