Setting CSS3 gradient properties with jQuery?

Question

I'm writing a plugin that is reliant on CSS3 gradient background properties. I have no problem getting something like this to work:


$(this).css({ '-webkit-box-shadow': 'inset 2px 2px 5px #DEDEDE' });

However, this fails to work:


$(this).css({ 'background': '-webkit-gradient(linear,left top,left bottom,from(#f4f4f4),to(#FFFFFF))' });

I was under the assumption that .css() worked with any property supported by the browser so I'm either setting it wrong with jQuery or this property isn't supported?

Nikita Rybak · Accepted Answer · 2010-08-09 22:33:28Z

5

I doubt the first example works either: if you want to set css property, you have to use two parameters, like $(this).css('background', '-webkit-gradient(linear,left top,left bottom,from(#f4f4f4),to(#FFFFFF))');

More on the subject:
http://api.jquery.com/css/

edit
You're right, it's possible to set css properties with {name:value} notation, they just don't tell it in the function summary (you have to read further on).
Anyway, here's the working example with two parameters (the second one from your post): http://jsfiddle.net/BX9Wa/

edited Aug 9, 2010 at 22:33

answered Aug 9, 2010 at 22:12

Nikita Rybak

68.1k22 gold badges163 silver badges183 bronze badges

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

3 Comments

theflowersoftime Over a year ago

Also works: $(this).css({ 'background': '-moz-linear-gradient(center bottom,rgb(255,255,255) 0%,rgb(241,250,254) 100%)' });

theflowersoftime Over a year ago

Also works: $(this).css({ 'filter': 'progid:DXImageTransform.Microsoft.gradient(startColorstr=#4cdbff, endColorstr=#FFFFFF)' }) AND

$(this).css({ '-ms-filter': '\"progid:DXImageTransform.Microsoft.gradient(startColorstr=#f4f4f4, endColorstr=#FFFFFF)\"' })

. LOL.

theflowersoftime Over a year ago

This is quite annoying. From messing around with this, it seems you cannot mix .css({ 'someProp':'someSetting' }) with .css( 'someProp','someSetting' ). The only property that doesn't work with the former is the webkit gradient. Even the IE filter gradients work with that syntax! Unless I am screwing something up again, my only solution to do this is to chain a ton of .css( 'someProp','someSetting' ) together or not be able to use the webkit gradient.

Collectives™ on Stack Overflow

Setting CSS3 gradient properties with jQuery?

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related