Setting background-image (linear gradient) using jquery variables

Question

I'm looking to set the background-image of a div using a linear gradient which uses a number variable.

I'm not sure how to set the jQuery to split the SetAttribute and add in the variable.

anAmazingSlider.setAttribute("style", "background-image: linear-gradient(to right, #e6e6e6, #e6e6e6 50%, #E74C3C 50%)");

I have a limit variable and need to set the the background % to that limit.

api.jquery.com/css If you have one or multiple values in JS variables you'll need to concatenate it to the string you set as the value of the rule. — Rory McCrossan
– Rory McCrossan, Commented Feb 23, 2018 at 14:28

Marvin Fischer · Accepted Answer · 2018-02-23 14:31:25Z

2

jQuery Style setting works like this:

anAmazingSlider.css({"background-image": "linear-gradient(to right, #e6e6e6, #e6e6e6 50%, #E74C3C 50%)"});

answered Feb 23, 2018 at 14:31

Marvin Fischer

2,5823 gold badges25 silver badges34 bronze badges

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

Comments

Mamboleoo · Accepted Answer · 2018-02-23 14:35:47Z

1

I don't really know what you mean by 'jQuery variables' ? Your code doesn't seem to rely on jQuery.

You can do it by concatenating the background with your variable like so :

var amount = 50;
anAmazingSlider.setAttribute("style", "background-image: linear-gradient(to right, #e6e6e6, #e6e6e6 " + amount + "%, #E74C3C 50%)");

This code will probably work but I would suggest to use this version instead :

var amount = 50;
anAmazingSlider.style.backgroundImage = "linear-gradient(to right, #e6e6e6, #e6e6e6 " + amount + "%, #E74C3C 50%)";

If you are using the ES6 syntax you can even skip the concatenation by using a Template literal.

var amount = 50;
anAmazingSlider.style.backgroundImage = `linear-gradient(to right, #e6e6e6, #e6e6e6  ${amount}%, #E74C3C 50%)`;

answered Feb 23, 2018 at 14:35

Mamboleoo

5393 silver badges6 bronze badges

1 Comment

Jim B Over a year ago

Apologies I just meant variables. Your second example is exactly what I was after. Couldn't get the right syntax, but looking at your example, I understand what I need to do.

Fabrizio Calderan · Accepted Answer · 2018-02-23 15:16:57Z

1

Alternatively you may use CSS variables and define the linear-gradient straight in the CSS like so, using e.g. 0% (or other) as a default value

Codepen demo

CSS

:root {
   --amount: 0%;
}  

.amazingslider {
   background-image: linear-gradient(to right, #e6e6e6, #e6e6e6 var(--amount), #E74C3C var(--amount))
}

and in Javascript just change the amount value (e.g. 50%) via

document.documentElement.style.setProperty("--amount", "50%");

The update of the variable will take effect immediately. A benefit of this approach is obviously to keep off as much CSS as possible from Javascript and let your Javascript code more mantainable.

edited Feb 23, 2018 at 15:16

answered Feb 23, 2018 at 14:42

Fabrizio Calderan

124k26 gold badges171 silver badges183 bronze badges

Collectives™ on Stack Overflow

Setting background-image (linear gradient) using jquery variables

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related