¿Se pueden modificar los valores de las variables CSS dinámicamente con JavaScript?
¡Sí! Aprende cómo modificar variables CSS dinámicamente con JavaScript usando element.style.setProperty('--variable', 'valor') para interactividad.
Los valores de las variables CSS (propiedades personalizadas) se pueden modificar dinámicamente utilizando JavaScript, lo que ofrece una gran flexibilidad para crear interacciones y adaptar estilos en tiempo real.
Dado que las variables CSS son, en esencia, propiedades CSS, puedes acceder a ellas y cambiarlas a través del objeto style de los elementos DOM. El método principal para esto es setProperty().
Para modificar una variable CSS global (definida en :root):
Puedes acceder al elemento raíz del documento (document.documentElement, que representa la etiqueta <html>) y modificar su estilo.
/* En tu archivo CSS */
:root {
--color-primario: blue;
--tamano-fuente-base: 16px;
}Lenguaje del código: PHP (php)// En tu archivo JavaScript
// Cambiar el color primario a verde
document.documentElement.style.setProperty('--color-primario', 'green');
// Cambiar el tamaño de fuente base
document.documentElement.style.setProperty('--tamano-fuente-base', '18px');Lenguaje del código: PHP (php)Para modificar una variable CSS local (definida en un elemento específico):
Primero seleccionas el elemento deseado y luego modificas su style.
/* En tu archivo CSS */
.mi-componente {
--color-fondo-componente: lightgray;
}Lenguaje del código: PHP (php)// En tu archivo JavaScript
const miComponente = document.querySelector('.mi-componente');
if (miComponente) {
miComponente.style.setProperty('--color-fondo-componente', 'skyblue');
}Lenguaje del código: PHP (php)Ventajas de esta capacidad:
- Temificación interactiva: Permite a los usuarios cambiar temas (ej. modo claro/oscuro) al instante.
- Estilos dinámicos: Ajustar la apariencia en respuesta a interacciones del usuario (como mover el ratón, hacer scroll) o cambios de estado de la aplicación.
- Visualizaciones de datos: Reflejar valores de JavaScript directamente en propiedades visuales.
Cuando cambias el valor de una variable CSS con JavaScript, cualquier elemento que esté utilizando esa variable a través de la función var() se actualizará automáticamente para reflejar el nuevo valor, aprovechando la reactividad del navegador.
