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
– Amritpal Singh, Commented Mar 14, 2012 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 : jsfiddle.net/barney/D9W4v — medBouzid
– medBouzid, Commented Aug 21, 2015 at 12:39

Rob W · Accepted Answer · 2012-03-14 17:30:51Z

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, 2012 at 17:30

answered Mar 14, 2012 at 17:25

Rob W

350k87 gold badges811 silver badges683 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

galer88 Over a year ago

I can't use class because values of gradient are dynamically generated

Rob W Over a year ago

@galer88 Use the method in my answer, or use this plugin.

kitti · Accepted Answer · 2012-03-14 17:48:24Z

0

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

edited Mar 14, 2012 at 17:48

answered Mar 14, 2012 at 17:33

kitti

14.9k33 silver badges50 bronze badges

2 Comments

BoltClock Over a year ago

"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.

kitti Over a year ago

@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.

Collectives™ on Stack Overflow

jquery cross browser css3 inline style

2 Answers 2

2 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related