javascript - 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);
}

fiddle :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)'
});

fiddle :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)'});

fiddle :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/