Atualizando Variáveis com JavaScript
Atualize dinamicamente propriedades personalizadas CSS a partir de JavaScript usando style.setProperty().
Atualizando Variáveis com JavaScript é uma aula grátis de CSS Academy no CoddyKit. Esta é a aula 4 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de CSS Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de CSS Academy inclui 4 aulas no total.
Por que atualizar variáveis CSS a partir de JS
As propriedades personalizadas CSS são dinâmicas no navegador. Alterá-las por meio de JavaScript atualiza imediatamente todos os elementos que usam essa propriedade — permitindo temas dinâmicos, controles deslizantes em tempo real e estilos orientados por estado sem alternar muitas classes.
Obtendo o valor de uma propriedade personalizada
Leia o valor de uma propriedade personalizada usando 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>
Definindo o valor de uma propriedade personalizada
Atualize uma propriedade personalizada usando style.setProperty() em qualquer 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>
Removendo uma propriedade personalizada
Remova uma substituição de propriedade (voltando ao valor declarado no CSS) usando 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>
Padrão de alternância de tema
Um alternador de tema clássico que troca um atributo data-theme e define variáveis para cada tema no CSS:
<div class="panel">Dark theme applied via data-theme</div>
<script>
document.body.dataset.theme = 'dark';
</script>
Barra de progresso com variável CSS
Controle o valor de uma barra de progresso inteiramente por meio de uma variável CSS definida em JavaScript:
<div class="progress-bar"></div>
<script>
function setProgress(pct) {
document.querySelector('.progress-bar')
.style.setProperty('--progress', pct + '%');
}
setProgress(70);
</script>
Rastreamento da posição do mouse
Crie efeitos de paralaxe ou que acompanham o cursor atualizando variáveis CSS de posição quando o mouse se move:
<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>
Variáveis orientadas pela rolagem
Atualize uma variável CSS com base na posição de rolagem para criar animações vinculadas à rolagem (as APIs modernas lidam melhor com isso, mas JS+variável ainda é uma abordagem simples):
<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>
Preferências do usuário com localStorage
Salve o tema selecionado em localStorage e restaure-o quando a página for carregada:
<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>
Animações CSS versus JS
Para animações suaves, prefira transições CSS que reajam às alterações nas propriedades personalizadas, em vez de ciclos de requestAnimationFrame em JS. O navegador gerencia a interpolação na camada do compositor.
Propriedades tipadas com @property
Registrar uma variável com @property permite que os navegadores a interpolem nas transições — algo que não funciona com propriedades personalizadas não registradas:
<div class="track">
<div class="bar"></div>
</div>
Verificação rápida
Qual método de JavaScript altera uma propriedade personalizada CSS no elemento raiz?
Recapitulação
Use style.setProperty() para atualizar propriedades personalizadas CSS a partir de JavaScript. As alterações se propagam instantaneamente para todos os elementos que as utilizam. Esse padrão possibilita temas dinâmicos, barras de progresso animadas, efeitos de cursor e animações orientadas pela rolagem — tudo isso sem alterar listas de classes nem sequências de estilos embutidos para várias propriedades.
Aprenda CSS com um tutor de IA — grátis
Escreva e execute código real no seu navegador, obtenha ajuda instantânea de um tutor de IA 24/7 e continue de onde parou na web ou no app.
- Cursos
- 40
- Aulas
- 159
Perguntas Frequentes
A aula “Atualizando Variáveis com JavaScript” é grátis?
Sim — o texto completo de “Atualizando Variáveis com JavaScript” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de CSS Academy, atualize para CoddyKit PRO. O curso de CSS Academy inclui 4 aulas no total.
O que vou aprender em “Atualizando Variáveis com JavaScript”?
Atualize dinamicamente propriedades personalizadas CSS a partir de JavaScript usando style.setProperty(). Você pratica CSS Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.
Preciso ter experiência prévia para começar CSS Academy?
Nenhuma experiência prévia é necessária. CSS Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 4 de 4.
Quanto tempo leva a aula “Atualizando Variáveis com JavaScript”?
A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.
Posso escrever e executar código nesta aula de CSS Academy?
Sim. Cada aula de CSS Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.
Todas as aulas deste curso
- Declaração e Uso de Propriedades Personalizadas
- Valores de Fallback e var()
- Definindo o Escopo de Variáveis para Componentes
- Atualizando Variáveis com JavaScript