Geek Answers Handbook

JQuery adding multiple css properties with the same name doesn't work

I am having a weird issue with jQuery. It seems that when jQuery is used to add multiple css properties with the same name (for compatibility with multiple browsers), each duplicate property is overwritten and only the last occurrence is 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 several times for browser compatibility.

Now I am trying to apply the above css code using jQuery as follows:

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

?

+4
4

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

+8

[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)');
+1

,

.css()

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

[vendorPrefix], ; , , , , -o-, -webkit-?

property element.style; style .

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>
Hide result

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

+1

, , - . , , , .

The answer in Patrick's comment seems useful (just use a radial gradient instead of a transform). If you combine all styles like a block of text, use the Filipes answer. You can also first detect the browser and apply only the styles that you need (an example of how you can do this) .

0
source

More articles:


All Articles