Estoy buscando establecer la imagen de fondo de un div usando un gradiente lineal que usa una variable numérica.

No estoy seguro de cómo configurar jQuery para dividir el SetAttribute y agregar la variable.

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

Tengo una variable de límite y necesito establecer el% de fondo en ese límite.

1
Jim B 23 feb. 2018 a las 17:27

3 respuestas

La mejor respuesta

¿Realmente no sé qué quieres decir con 'variables jQuery'? Su código no parece depender de jQuery.

Puede hacerlo concatenando el fondo con su variable de la siguiente manera:

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

Este código probablemente funcionará, pero sugeriría usar esta versión en su lugar:

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

Si está utilizando la sintaxis de ES6, incluso puede omitir la concatenación utilizando un Plantilla literal.

var amount = 50;
anAmazingSlider.style.backgroundImage = `linear-gradient(to right, #e6e6e6, #e6e6e6  ${amount}%, #E74C3C 50%)`;
1
Mamboleoo 23 feb. 2018 a las 14:35

La configuración de jQuery Style funciona así:

anAmazingSlider.css({"background-image": "linear-gradient(to right, #e6e6e6, #e6e6e6 50%, #E74C3C 50%)"});
2
Marvin Fischer 23 feb. 2018 a las 14:31

Alternativamente, puede usar variables CSS y definir las { {X0}} directamente en el CSS así, usando eg 0% (u otro) como valor predeterminado

Codepen demo


CSS

:root {
   --amount: 0%;
}  

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

Y en Javascript simplemente cambie el valor de la cantidad (por ejemplo, 50%) a través de

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

La actualización de la variable tendrá efecto inmediatamente. Una ventaja de este enfoque es, obviamente, evitar la mayor cantidad de CSS posible de Javascript y permitir que su código Javascript sea más fácil de mantener.

1
Fabrizio Calderan 23 feb. 2018 a las 15:16