How do i set a dynamic gradient color using JQuery

Question

I'm currently adding a class to a DIV in javascript using the following code

if(note !== 0) $el.addClass('seq-note');

and here is the css

.seq-ui .seq-row span.seq-note {
  background: #444 -webkit-linear-gradient(#7c8, transparent);
  background: #444 linear-gradient(#7c8, transparent);
  border-color: #565;
}

note is actually a hex value, so I want to change the gradient to that hax color. How would I re-factor this code so that the color is dynamic

score 1 · Accepted Answer · edited May 23 '17 at 11:53

Is there anything preventing you from using .css?

var bgColor;
bgColor = "#444 linear-gradient(#" + note + ")";
$('.seq-note').css("background", bgColor);

This will not update the CSS file - .css works by adding inline CSS to the DOM - so I believe any future divs to which you add this class will not have this property.

That does handle vendor prefixes since jQuery 1.8.0, as explained here: Does .css() automatically add vendor prefixes?

How do i set a dynamic gradient color using JQuery

1 Answers1