Oppdatere variabler med JavaScript
Oppdater CSS-egendefinerte egenskaper dynamisk fra JavaScript ved hjelp av style.setProperty().
Oppdatere variabler med JavaScript er en gratis leksjon i CSS Academy på CoddyKit. Dette er leksjon 4 av 4. Du kan lese hele leksjonen gratis nedenfor – og deretter øve praktisk i nettleseren med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i CSS Academy, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i CSS Academy inneholder totalt 4 leksjoner.
Hvorfor oppdatere CSS-variabler fra JS?
Egendefinerte CSS-egenskaper er live i nettleseren. Når de endres med JavaScript, oppdateres alle elementer som bruker egenskapen umiddelbart – noe som muliggjør dynamiske temaer, glidebrytere i sanntid og tilstandsbaserte stiler uten å bytte ut mange klasser.
Hente verdien til en egendefinert egenskap
Les verdien til en egendefinert egenskap ved hjelp av 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>
Angi verdien til en egendefinert egenskap
Oppdater en egendefinert egenskap ved hjelp av style.setProperty() på et hvilket som helst element:
<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>
Fjerne en egendefinert egenskap
Fjern en egenskapsoverstyring (gå tilbake til CSS-definert verdi) ved hjelp av 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>
Mønster for temavelger
En klassisk temavelger som bytter et data-theme-attributt og definerer variabler per tema i CSS:
<div class="panel">Dark theme applied via data-theme</div>
<script>
document.body.dataset.theme = 'dark';
</script>
Fremdriftslinje med CSS-variabel
Styr verdien til en fremdriftslinje utelukkende via en CSS-variabel som settes fra JavaScript:
<div class="progress-bar"></div>
<script>
function setProgress(pct) {
document.querySelector('.progress-bar')
.style.setProperty('--progress', pct + '%');
}
setProgress(70);
</script>
Sporing av museposisjon
Opprett parallax- eller markørfølgende effekter ved å oppdatere posisjonsvariabler i CSS når musen beveger seg:
<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>
Variabler styrt av rulling
Oppdater en CSS-variabel basert på rulleposisjonen for rullekoblede animasjoner (moderne API-er håndterer dette bedre, men JS+variabel er fortsatt en enkel fremgangsmåte):
<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>
Brukerpreferanser med localStorage
Lagre det valgte temaet i localStorage, og gjenopprett det når siden lastes inn:
<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>
CSS- kontra JS-animasjoner
For jevne animasjoner bør CSS-overganger som reagerer på endringer i egendefinerte egenskaper, foretrekkes fremfor JS-løkker med requestAnimationFrame. Nettleseren håndterer interpoleringen i kompositortråden.
Typede egenskaper med @property
Registrering av en variabel med @property gjør at nettlesere kan interpolere den i overganger – noe som ikke fungerer med uregistrerte egendefinerte egenskaper:
<div class="track">
<div class="bar"></div>
</div>
Kort sjekk
Hvilken JavaScript-metode endrer en egendefinert CSS-egenskap på rotelementet?
Oppsummering
Bruk style.setProperty() til å oppdatere egendefinerte CSS-egenskaper fra JavaScript. Endringer forplanter seg umiddelbart til alle elementer som bruker egenskapen. Dette mønsteret brukes til dynamiske temaer, animerte fremdriftslinjer, markøreffekter og rullestyrte animasjoner – alt uten å endre klasselister eller inline-stilstrenger for flere egenskaper.
Lær deg CSS med en AI-veileder – gratis
Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.
- Kurs
- 40
- Leksjoner
- 159
Ofte stilte spørsmål
Er leksjonen «Oppdatere variabler med JavaScript» gratis?
Ja – hele teksten i «Oppdatere variabler med JavaScript» er gratis å lese her på nettet. For å øve interaktivt med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt, og for å låse opp resten av CSS Academy-kurset, kan du oppgradere til CoddyKit PRO. Kurset i CSS Academy inneholder totalt 4 leksjoner.
Hva lærer jeg i «Oppdatere variabler med JavaScript»?
Oppdater CSS-egendefinerte egenskaper dynamisk fra JavaScript ved hjelp av style.setProperty(). Du øver på CSS Academy med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.
Trenger jeg erfaring for å begynne med CSS Academy?
Ingen tidligere erfaring er nødvendig. CSS Academy på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 4 av 4.
Hvor lang tid tar leksjonen «Oppdatere variabler med JavaScript»?
De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.
Kan jeg skrive og kjøre kode i denne CSS Academy-leksjonen?
Ja. Alle CSS Academy-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.
Alle leksjonene i dette kurset
- Deklarere og bruke egendefinerte egenskaper
- Reserveverdier og var()
- Avgrense variabler til komponenter
- Oppdatere variabler med JavaScript