jquery cross browser css3 inline style

Question

It is possible to get something like this from jquery?

<div id="test" style="background: -webkit-linear-gradient(top, #2F2727, #1a82f7); 
background: -moz-linear-gradient(top, #2F2727, #1a82f7);"/>

When I use:

$("#test").css({
   'background': '-webkit-linear-gradient(top, #2F2727, #1a82f7)',
   'background': '-moz-linear-gradient(top, #2F2727, #1a82f7)'
});

the result is (in chrome)

<div id="test" style="background: -webkit-linear-gradient(top, #2F2727, #1a82f7); "/>

you can create css class and use addclass method instead of .css — Amritpal Singh, Mar 14 '12 at 17:25
look like this is an old question but I will share a jsfiddle I've found in the internet which does what you requested : http://jsfiddle.net/barney/D9W4v/ — medBouzid, Aug 21 '15 at 12:39

Rob W · Accepted Answer · 2012-03-14T17:30:51.863

0

That is not possible in jQuery, because the keys cannot be duplicated. You have to use $.cssHooks or:

$("#test").css('background', '-webkit-linear-gradient(top, #2F2727, #1a82f7)')
          .css('background', '-moz-linear-gradient(top, #2F2727, #1a82f7)');

Instead of setting fixed styles using style, I recommend to use the *Class functions: addClass, removeClass and toggleClass.

As for the HTML, you have to use the style attribute:

<div id="test" style="background: -webkit-linear-gradient(top, #2F2727, #1a82f7); 
 background: -moz-linear-gradient(top, #2F2727, #1a82f7);"/>

edited Mar 14 '12 at 17:30

answered Mar 14 '12 at 17:25

Rob W

341,306
83
791
678

I can't use class because values of gradient are dynamically generated – galer88 Mar 14 '12 at 17:30
@galer88 Use the method in my answer, or use [this plugin](http://stackoverflow.com/a/8457479/938089?build-javascript-object-to-use-with-jquery-css-what-about-duplicate-keys). – Rob W Mar 14 '12 at 17:32

kitti · Answer 2 · 2012-03-14T17:48:24.260

No, and you shouldn't need to. You can't have multiple values for a single CSS property. That works directly in CSS because the duplicate properties overwrite each other, and in this case is dependent upon the browser. Basically, with that CSS, webkit-based browsers see the webkit-specific property and apply it, then see an unknown property and ignore it. Gecko-based browsers will see an unknown property and ignore it, then see a Mozilla-specific property and apply it.

Try your code in Firefox - I bet it will work just fine, except that it will show the Mozilla property instead of the webkit one.

Also, if this is supposed to be CSS3, you should be able to just use the linear-gradient instead of the vendor-specific ones, and then it'll work in all CSS3-compatible browsers as well.

EDIT: Well except linear-gradient isn't actually supported. So instead you should use those vendor-specific values and additionally use -ms-linear-gradient to support IE, -o-linear-gradient to support Opera, and also use linear-gradient for future compatibility. ;)

"you should be able to just use the `linear-gradient` instead of the vendor-specific ones, and then it'll work in all CSS3-compatible browsers as well" Which is as of Q1 2012, effectively, none of them. — BoltClock, Mar 14 '12 at 17:34
@BoltClock Ok, thanks. Didn't know it wasn't actually supported yet... I had wanted to point out that '-webkit-linear-gradient' and '-moz-linear-gradient' aren't CSS3 properties, they're vendor-specific properties. — kitti, Mar 14 '12 at 17:44

jquery cross browser css3 inline style

2 Answers2