En CSS, las variables son propiedades personalizadas definidas por editores CSS y que contienen valores específicos que se pueden volver a usar en el documento. Las variables tienen un valor global como puede ser un color definido. La ventaja de usar variables es que si cambias el valor, automáticamente se aplicará el cambio a todas las clases que contengan esta variable.
A veces te puede interesar cambiar o añadir alguna propiedad CSS a algún elemento del documento con jQuery. Para añadir o modificar una propiedad CSS con jQuery puedes hacer uso del método .css(). Sin embargo, para cambiar el valor de una variable con jQuery el método .css() no te va a servir. En su lugar, puedes utilizar el método .setProperty().
Cambiando una variable CSS con jQuery con el método .setProperty()
Pongamos por ejemplo que tenemos definida la variable «–color» en una clase:
.contenedor {
--color: blue;
}Ahora vamos a cambiar el valor de la variable «–color» de «blue» a «red» con jQuery haciendo uso del método .setProperty():
$(".contenedor").get(0).style.setProperty("--color", "red");Al aplicar la sentencia, habremos cambiado el valor de la variable «–color».
Para definir una variable CSS con jQuery puedes hacer uso del mismo método y de la misma manera. Si la variable no existe en la hoja de estilos se creará, y si ya existe, se modificará el valor de la variable con el valor aplicado en la sentencia de jQuery.
