jQuery添加多个具有相同名称的css属性不起作用

Question

我遇到了一个与jQuery有关的奇怪问题.似乎当jQuery用于添加具有相同名称的多个css属性时(对于跨浏览器兼容性),每个"重复"属性都被覆盖,并且仅使用最后一次出现.

例如,在纯css中,我有这个:

div.ellipse {
    background-image: radial-gradient(center bottom, ellipse cover, #ffeda3, #ffc800);
    background-image: -o-radial-gradient(center bottom, ellipse cover, #ffeda3, #ffc800);
    background-image: -ms-radial-gradient(center bottom, ellipse cover, #ffeda3, #ffc800);
    background-image: -moz-radial-gradient(center bottom, ellipse cover, #ffeda3, #ffc800);
    background-image: -webkit-radial-gradient(center bottom, ellipse cover, #ffeda3, #ffc800);
}

小提琴:http://jsfiddle.net/Lzhcdr2f/

背景图像属性多次使用以实现跨浏览器兼容性.

现在我尝试使用jQuery应用上面的css代码,如下所示:

$('.ellipse').css({ 
    'background-image': 'radial-gradient(center bottom, ellipse cover, #ffeda3, #ffc800)',
    'background-image': '-o-radial-gradient(center bottom, ellipse cover, #ffeda3, #ffc800)',
    'background-image': '-ms-radial-gradient(center bottom, ellipse cover, #ffeda3, #ffc800)',
    'background-image': '-moz-radial-gradient(center bottom, ellipse cover, #ffeda3, #ffc800)',
    'background-image': '-webkit-radial-gradient(center bottom, ellipse cover, #ffeda3, #ffc800)'
});

小提琴:http://jsfiddle.net/z9ygxj9j/

上面的代码只能在webkit浏览器(chrome/safari)中使用,因为最后一行是指-webkit浏览器,而jQuery似乎覆盖了具有相同名称的属性,并且仅使用最后一次出现.

唯一的方法,似乎是这样:

$('.ellipse').css({'background-image': 'radial-gradient(center bottom, ellipse cover, #ffeda3, #ffc800)'});
$('.ellipse').css({'background-image': '-ms-radial-gradient(center bottom, ellipse cover, #ffeda3, #ffc800)'});
$('.ellipse').css({'background-image': '-moz-radial-gradient(center bottom, ellipse cover, #ffeda3, #ffc800)'});
$('.ellipse').css({'background-image': '-webkit-radial-gradient(center bottom, ellipse cover, #ffeda3, #ffc800)'});
$('.ellipse').css({'background-image': '-o-radial-gradient(center bottom, ellipse cover, #ffeda3, #ffc800)'});

小提琴:http://jsfiddle.net/cte7ov36/

有没有办法在同一个数组中多次使用相同的属性？

Answer 1

维护此代码的最简单方法是将css存储在类中并在元素中使用.样式定义应与您的代码分开.

如果你真的想在jQuery中这样做,你可以使用这种attr风格

var style = [
    'background-image: radial-gradient(center bottom, ellipse cover, #ffeda3, #ffc800)',
    'background-image: -o-radial-gradient(center bottom, ellipse cover, #ffeda3, #ffc800)',
    'background-image: -ms-radial-gradient(center bottom, ellipse cover, #ffeda3, #ffc800)',
    'background-image: -moz-radial-gradient(center bottom, ellipse cover, #ffeda3, #ffc800)',
    'background-image: -webkit-radial-gradient(center bottom, ellipse cover, #ffeda3, #ffc800)'
].join(';');

$('.ellipse').attr('style', style);

http://jsfiddle.net/z9ygxj9j/2/