javascript - jQuery adding multiple css properties with same name doesn't work - Stack Overflow

admin管理员组

文章数量:1279113

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 patibility), 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: /

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

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

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

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

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 patibility), 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/Lzhcdr2f/

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

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/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/cte7ov36/

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

• javascript
• jquery
• css

Share Improve this question Follow edited May 2, 2015 at 6:23 filype 8,3901010 gold badges4545 silver badges6969 bronze badges asked May 2, 2015 at 6:11 Kevin MKevin M 1,31211 gold badge1717 silver badges3333 bronze badges 9

• 5 make a class in css and use .addClass – Mohamed-Yousef Commented May 2, 2015 at 6:13
• 1 possible duplicate of Applying inline styles with browser prefixes – Patrick Commented May 2, 2015 at 6:14
• @Mohamed-Yousef, I can't, the property values, such as color, are being generated by the user and therefor applied via jquery on the fly. – Kevin M Commented May 2, 2015 at 6:15
• A given style property on a DOM element cannot have multiple values in the way you do it in a stylesheet. Plus an object in Javascript like what you're passing to .css() only has one value for a given property anyway. – jfriend00 Commented May 2, 2015 at 6:18
• @Patrick Thanks, but that seems to be something pletely different. Not related to my issue. My issue is that jquery overwrites css properties when duplicates are used. – Kevin M Commented May 2, 2015 at 6:19

 |  Show 4 more ments

4 Answers 4

Sorted by: Reset to default 10

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/z9ygxj9j/2/

This is possible by other way

[js fiddle][1]:http://jsfiddle/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)');

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./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/cte7ov36/3/

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 ment 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).

本文标签： javascriptjQuery adding multiple css properties with same name doesn39t workStack Overflow