Ya he hablado en este blog hace mucho tiempo acerca de las variables CSS y cómo nos permiten obtener una gran potencia sin necesidad de recurrir a metalenguajes como Sass/SCSS o similares solo para parametrizar los diseños (aunque este tipo de metalenguajes tienen otras muchas ventajas y los sigo recomendando).
El objetivo principal de las variables CSS es, como digo, poder parametrizar el comportamiento y el aspecto de un diseño Web. Así, podemos definir variables globales o por secciones para cosas como colores o medidas y cambiar de golpe todo el diseño con tan solo tocar una línea en lugar de tener que buscar y reemplazar en miles de ellas.
Otra utilidad menos conocida es la posibilidad de modificar dinámicamente los valores de estas variables CSS mediante JavaScript. Un ejemplo muy sencillo: cambiar los colores de la página, sin recargarla, cambiando tan sólo el valor de las variables CSS que controlan este aspecto.
Para lograrlo lo único que deberíamos hacer es modificar el valor de las variables desde nuestro código y el navegador se ocuparía automáticamente del resto. Pero, ¿cómo accedemos a las variables CSS desde código JavaScript?
La respuesta es muy sencilla y directa: modificando el valor de la variable de la misma manera que modificaríamos cualquier otra propiedad.
Como sabemos (y sino lee el artículo referenciado al principio) las variables CSS se pueden definir en varios niveles: globalmente para toda la página o para elementos concretos y sus "hijos", e incluso en un estilo en línea afectando solo a ese elemento con prioridad máxima.
Así, por ejemplo, para modificar una variable CSS global lo único que tenemos que hacer es algo como esto:
document.documentElement.style.setproperty('--nombreVariable', 'valor');
Las variables globales CSS se definen para todo el documento, es decir para el elemento raíz de la página, es decir, el elemento <html>
, y en JavaScript obtenemos una referencia al mismo a través de la propiedad documentElement
del documento, como en este fragmento.
De este modo, en cuanto cambiemos el valor de la variable global, el cambio se aplica de inmediato, afectando a todos los elementos que usen la variable. Rápido y simple.
Si no fuese una variable CSS global, sino que queremos modificar el valor de ésta sólo para un cierto elemento y sus descendientes (si la propiedad se hereda), haríamos lo mismo pero cambiando el valor para ese elemento. Así de sencillo y así de efectivo.
Como ejemplo simple de uso, por si quieres probarlo, he creado una minipágina (ZIP, 0.7 KB) que tiene tan solo un cuadradito cuyo color se controla con una variable CSS llamada --color
(en plan original 😆). Cada vez que lo pulsas el color va rotando con JavaScript a partir de una lista de colores que tengo en una matriz:
Sencillo, pero ilustra lo que quiero explicar.
¡Espero que te sea útil!