Actualización de variables con JavaScript
Actualice dinámicamente las propiedades personalizadas de CSS desde JavaScript mediante style.setProperty().
Actualización de variables con JavaScript es una lección gratuita de CSS Academy en CoddyKit. Esta es la lección 4 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de CSS Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de CSS Academy incluye 4 lecciones en total.
¿Por qué actualizar las variables de CSS desde JS?
Las propiedades personalizadas de CSS están activas en el navegador. Al cambiarlas mediante JavaScript, todos los elementos que usan esa propiedad se actualizan inmediatamente, lo que permite crear temas dinámicos, controles deslizantes en tiempo real y estilos basados en el estado sin alternar numerosas clases.
Obtener el valor de una propiedad personalizada
Lea el valor de una propiedad personalizada mediante getComputedStyle():
<div class="demo" style="background:#3b82f6;color:#fff;padding:16px;">Reading --primary-color</div>
<p>Value: <span id="output">(reading...)</span></p>
<script>
const root = document.documentElement;
const value = getComputedStyle(root)
.getPropertyValue('--primary-color').trim();
console.log(value); // '#3b82f6'
document.getElementById('output').textContent = value;
</script>
Establecer el valor de una propiedad personalizada
Actualice una propiedad personalizada mediante style.setProperty() en cualquier elemento:
<div class="card">
Card body
</div>
<script>
// Set globally on :root
document.documentElement.style.setProperty('--primary-color', '#ef4444');
// Set on a specific element
document.querySelector('.card').style.setProperty('--card-bg', 'pink');
</script>
Eliminar una propiedad personalizada
Elimine una sobrescritura de propiedad (para volver al valor declarado en CSS) mediante style.removeProperty():
<div class="badge">Removing an inline override restores the :root value</div>
<script>
// Simulate an inline override was set, then removed
document.documentElement.style.setProperty('--primary-color', 'crimson');
document.documentElement.style.removeProperty('--primary-color');
// Now the :root CSS value applies again
</script>
Patrón de selector de temas
Un selector de temas clásico que cambia un atributo data-theme y define variables para cada tema en CSS:
<div class="panel">Dark theme applied via data-theme</div>
<script>
document.body.dataset.theme = 'dark';
</script>
Barra de progreso con una variable de CSS
Controle por completo el valor de una barra de progreso mediante una variable de CSS establecida desde JavaScript:
<div class="progress-bar"></div>
<script>
function setProgress(pct) {
document.querySelector('.progress-bar')
.style.setProperty('--progress', pct + '%');
}
setProgress(70);
</script>
Seguimiento de la posición del ratón
Cree efectos de paralaje o efectos que sigan al cursor actualizando las variables de posición de CSS cuando se mueve el ratón:
<div class="cursor-dot"></div>
<script>
document.addEventListener('mousemove', e => {
document.documentElement.style.setProperty('--mouse-x', e.clientX + 'px');
document.documentElement.style.setProperty('--mouse-y', e.clientY + 'px');
});
</script>
Variables controladas por el desplazamiento
Actualice una variable de CSS según la posición de desplazamiento para crear animaciones vinculadas al desplazamiento (las API modernas gestionan esto mejor, pero JS+variable sigue siendo un método sencillo):
<div style="height: 800px; background: linear-gradient(#f8fafc, #cbd5e1);">
<div class="scroll-fill"></div>
</div>
<script>
window.addEventListener('scroll', () => {
const pct = window.scrollY / (document.body.scrollHeight - window.innerHeight);
document.documentElement.style.setProperty('--scroll', pct);
});
</script>
Preferencias del usuario con localStorage
Guarde el tema seleccionado en localStorage y restáurelo al cargar la página:
<button class="theme-toggle" onclick="toggleTheme()">Toggle theme</button>
<div class="content">Themed content</div>
<script>
// Restore
const saved = localStorage.getItem('theme') || 'light';
document.documentElement.dataset.theme = saved;
// Toggle
function toggleTheme() {
const next = document.documentElement.dataset.theme === 'dark' ? 'light' : 'dark';
document.documentElement.dataset.theme = next;
localStorage.setItem('theme', next);
}
</script>
Animaciones de CSS frente a JS
Para obtener animaciones fluidas, prefiera las transiciones de CSS que reaccionan a los cambios de las propiedades personalizadas en lugar de los bucles de JS con requestAnimationFrame. El navegador gestiona la interpolación en el hilo del compositor.
Propiedades tipadas con @property
Registrar una variable con @property permite que los navegadores la interpolen en las transiciones, algo que no funciona con las propiedades personalizadas no registradas:
<div class="track">
<div class="bar"></div>
</div>
Comprobación rápida
¿Qué método de JavaScript cambia una propiedad personalizada de CSS en el elemento raíz?
Resumen
Use style.setProperty() para actualizar las propiedades personalizadas de CSS desde JavaScript. Los cambios se propagan inmediatamente a todos los elementos que las usan. Este patrón permite crear temas dinámicos, barras de progreso animadas, efectos que siguen al cursor y animaciones controladas por el desplazamiento, todo ello sin modificar listas de clases ni cadenas de estilos en línea para varias propiedades.
Aprende CSS con un tutor de IA — gratis
Escribe y ejecuta código real en tu navegador, obtén ayuda instantánea de un tutor de IA disponible 24/7 y continúa donde lo dejaste en la web o en la aplicación.
- Cursos
- 40
- Lecciones
- 159
Preguntas frecuentes
¿La lección «Actualización de variables con JavaScript» es gratis?
Sí — el texto completo de «Actualización de variables con JavaScript» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de CSS Academy, actualiza a CoddyKit PRO. El curso de CSS Academy incluye 4 lecciones en total.
¿Qué aprenderé en «Actualización de variables con JavaScript»?
Actualice dinámicamente las propiedades personalizadas de CSS desde JavaScript mediante style.setProperty(). Practicas CSS Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar CSS Academy?
No se requiere experiencia previa. CSS Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 4 de 4.
¿Cuánto tiempo toma la lección «Actualización de variables con JavaScript»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de CSS Academy?
Sí. Cada lección de CSS Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- Declaración y uso de propiedades personalizadas
- Valores de reserva y var()
- Alcance de variables para componentes
- Actualización de variables con JavaScript