我正在尝试修改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)'
});
什么都没发生.....
答案 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的元素。