setting browser-specific CSS properties with jQuery

Question

I'm trying to modify gradient values in the background-image property and I can't :(

  data = 'ff55dd';
  $(".el").css({
    'background-image' : '-webkit-gradient(linear, left top, left bottom, from(#' + data + '), to(#aa1133))',
    'background-image' : '-webkit-linear-gradient(#' + data + ', #aa1133)',
    'background-image' : '-moz-linear-gradient(#' + data + ', #aa1133)',
    'background-image' : '-o-linear-gradient(top, #ff3345, #aa1133)',
    'background-image' : '-khtml-gradient(linear, left top, left bottom, from(#' + data + '), to(#aa1133))',
    'filter'           : 'progid:DXImageTransform.Microsoft.gradient(startColorstr=\'#' + data' + '\', endColorstr=\'#aa1133\', GradientType=0)',
    'background-image' : 'linear-gradient(#ff5534, #aa1133)'
  });

Nothing happens.....

Well, your code throws an syntax error (on the `'filter'` line)... didn't you notice? — Šime Vidas, Nov 05 '11 at 19:12

skython · Accepted Answer · 2011-11-05T19:02:47.827

4

Looks like its overwriting the rules if you put them in all at once.

I added them one by one and it seems to work.

    $(".e1")
      .css('background-image','-webkit-gradient(linear, left top, left bottom, from(#' + data + '), to(#aa1133))')
      .css('background-image','-webkit-linear-gradient(#' + data + ', #aa1133)')
      .css('background-image','-moz-linear-gradient(#' + data + ', #aa1133)')
      ...

edited Nov 05 '11 at 19:02

answered Nov 05 '11 at 13:06

skython

331
4
6

Does it really? That'd be ... interesting. I don't know how that could work, honestly, since obviously setting something like "color" to a value replaces the old value. – Pointy Nov 05 '11 at 13:08
1

I think the browser catches the rule which is for itself. Because in the developer console of chromium I see only one rule, the webkit linear gradient one. So if you add them one by one it will overwrite them only if matching with the current browser. – skython Nov 05 '11 at 13:33

score 1 · Answer 2 · answered Nov 05 '11 at 13:03

This is not going to work. Why? Because in that call to ".css()" you're not actually writing CSS code, you're writing JavaScript code. In an object constant, when you supply many different values for the same property name, you'll end up with just one property by the time the ".css()" code actually gets the object as a parameter. Therefore, only the very last "background-image" value you set will be left. All the others will be overwritten.

In other words, your code is equivalent to this:

$(".el").css({
    'filter'           : 'progid:DXImageTransform.Microsoft.gradient(startColorstr=\'#' + data + '\', endColorstr=\'#aa1133\', GradientType=0)',
    'background-image' : 'linear-gradient(#ff5534, #aa1133)'
});

I doubt there's any way to do this via jQuery other than to directly set the "style" attribute to the complete block of CSS, or to write the CSS into a constructed <style> element that you add to the DOM.

Ah I see :( Is there any way I could set multiple properties without having to resort to browser checks? — Alex, Nov 05 '11 at 13:05
The answer to [this question](http://stackoverflow.com/questions/5735521/jquery-css-gradient) may be useful to you. — Michael Mior, Nov 05 '11 at 13:10

setting browser-specific CSS properties with jQuery

2 Answers2

Linked