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
– Šime Vidas, Commented Nov 5, 2011 at 19:12

skython · Accepted Answer · 2011-11-05 19:02:47Z

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 5, 2011 at 19:02

answered Nov 5, 2011 at 13:06

skython

3314 silver badges6 bronze badges

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

2 Comments

Pointy Over a year ago

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.

skython Over a year ago

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.

Pointy · Accepted Answer · 2011-11-05 13:03:27Z

1

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.

answered Nov 5, 2011 at 13:03

Pointy

415k62 gold badges600 silver badges631 bronze badges

2 Comments

Alex Over a year ago

Ah I see :( Is there any way I could set multiple properties without having to resort to browser checks?

Michael Mior Over a year ago

The answer to this question may be useful to you.

Collectives™ on Stack Overflow

setting browser-specific CSS properties with jQuery

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