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

我正在尝试修改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)' }); 

什么都没发生…..

Answer 1

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

我一个接一个地添加它们似乎工作。

  $(".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)') ... 

Answer 2

这不会起作用。 为什么？ 因为在调用“.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写入您添加到DOM的构造

元素之外，还有任何方法可以通过jQuery执行此操作。