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

Question

I came across a strange issue with jQuery. It seems that when jQuery is used to add multiple css properties with the same name (for cross browser compatibility), each "duplicate" property, is being overwritten and only the last occurrence is being used.

Example, in pure css, I have this:

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/

The background image property is used multiple times for cross browser compatibility.

Now I try to apply the above css code using jQuery like this:

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

The above code will ONLY work in webkit browsers (chrome/safari), because the last line refers to -webkit browser, and jQuery seems to override properties with the same name and only use the last occurrence.

The only way around, seems to be this:

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

Is there no way to use the same property multiple times inside the same array?

Answer 1

The easiest way to maintain this code would be to store your css in a class and use in your elements. Style definition should be separate to your code.

if you really want to do this in jQuery you can use the attr style

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

This is possible by other way

[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

Note,

calling .css()

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

should not affect non [vendorPrefix] browser display , rendering ; save for possibly opera, which not certain if still utilizes both -o- and -webkit- ?

This approach checks for a property of element.style ; replaces given text values within style element text with vendor prefixed value text.

Try

 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

As you said, you try to appear styles generated by the user with some application. We don't know what is exact format of the styles you get from that program element so it is hard to create good answer.

The answer in the comment by Patrick seems to be useful (just instead of transform use radial-gradient). If you gets all styles together like a block of text then use Filipes answer. Also you can detect browser firstly and that apply only that styles that you need (there is example how you can do that) .