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/

Answer 2

这可以通过其他方式

[js fiddle][1]:http://jsfiddle.net/cte7ov36/2/

$('.ellipse').attr('style','background-image: 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);background-image: -o-radial-gradient(center bottom, ellipse cover, #ffeda3, #ffc800)');

Answer 3

注意，

致电.css()

ellipse
.css("background-image", "-[vendorPrefix]-radial-gradient(center bottom, ellipse cover, #ffeda3, #ffc800)");

不应影响非[vendorPrefix]浏览器显示，渲染;保存可能的歌剧，如果仍然同时使用-o-和-webkit-？

则不确定

此方法检查property element.style;将style元素文本中的给定文本值替换为供应商前缀值文本。

尝试

var ellipse = $('.ellipse')
, style = $("style")
, prefixes = {
    "MozAnimation": "-moz-",
    "webkitAnimation": "-webkit-",
    "msAnimation": "-ms-",
    "oAnimation": "-o-"
  };
// should not affect non `-moz-` browser 
ellipse
.css("background-image", "-moz-radial-gradient(center bottom, ellipse cover, #ffeda3, #ffc800)");

$.each(prefixes, function(key, val) {
  if (key in ellipse[0].style) {
    $("style").text(function(i, text) {
      return text.replace(/(radial-gradient)/g, val + "$1")
    })
  }
});

console.log(style.text(), ellipse.css("backgroundImage"));

.demo-wrapper div {
  width: 910px;
  height: 250px;
  padding: 10px;
  margin: 25px auto;
  border: 5px solid #fff;
}
.ellipse {
  background-image: radial-gradient(center bottom, ellipse cover, #ffeda3, #ffc800);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="demo-wrapper">
  <div class="ellipse">
    <h3>Elliptical Gradient</h3>
    Lorem Ipsum</div>
</div>

jsfiddle http://jsfiddle.net/cte7ov36/3/

Answer 4

正如您所说，您尝试使用某些应用程序显示用户生成的样式。我们不知道你从该程序元素获得的样式的确切格式是什么，因此很难创建好的答案。

帕特里克评论中的答案似乎很有用（而不是变换使用径向渐变）。如果你像一块文字一样得到所有的样式，那么使用Filipes的答案。此外，您可以首先检测浏览器，并仅应用您需要的样式(there is example how you can do that)。

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

4 个答案: