0Pricing
CSS Academy · Lektion

Variablen mit JavaScript aktualisieren

Aktualisieren Sie CSS Custom Properties dynamisch aus JavaScript mit style.setProperty().

Variablen mit JavaScript aktualisieren ist eine kostenlose CSS Academy-Lektion auf CoddyKit. Dies ist Lektion 4 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des CSS Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der CSS Academy-Kurs umfasst insgesamt 4 Lektionen.

Warum sollten Sie CSS-Variablen aus JS aktualisieren?

Benutzerdefinierte CSS-Eigenschaften sind im Browser reaktiv. Wenn Sie sie über JavaScript ändern, werden alle Elemente, die diese Eigenschaft verwenden, sofort aktualisiert – dadurch werden dynamische Themes, Schieberegler in Echtzeit und statusabhängige Styles möglich, ohne zahlreiche Klassen umzuschalten.

Wert einer benutzerdefinierten Eigenschaft auslesen

Lesen Sie den Wert einer benutzerdefinierten Eigenschaft mit getComputedStyle() aus:

<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>

Wert einer benutzerdefinierten Eigenschaft festlegen

Aktualisieren Sie eine benutzerdefinierte Eigenschaft mit style.setProperty() für ein beliebiges 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>

Benutzerdefinierte Eigenschaft entfernen

Entfernen Sie eine Überschreibung einer Eigenschaft (und kehren Sie zum in CSS festgelegten Wert zurück) mit 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>

Muster für den Theme-Umschalter

Ein klassischer Theme-Umschalter, der ein data-theme-Attribut austauscht und Variablen für jedes Theme in CSS definiert:

<div class="panel">Dark theme applied via data-theme</div>
<script>
  document.body.dataset.theme = 'dark';
</script>

Fortschrittsbalken mit CSS-Variable

Steuern Sie den Wert eines Fortschrittsbalkens vollständig über eine CSS-Variable, die aus JavaScript gesetzt wird:

<div class="progress-bar"></div>
<script>
  function setProgress(pct) {
    document.querySelector('.progress-bar')
      .style.setProperty('--progress', pct + '%');
  }
  setProgress(70);
</script>

Mausposition verfolgen

Erzeugen Sie Parallax- oder Cursor-Folgeeffekte, indem Sie Positionsvariablen während der Mausbewegung aktualisieren:

<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>

Scrollgesteuerte Variablen

Aktualisieren Sie eine CSS-Variable abhängig von der Scrollposition für scrollverknüpfte Animationen (moderne APIs erledigen dies besser, aber JS und Variablen sind weiterhin ein einfacher Ansatz):

<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>

Benutzereinstellungen mit localStorage

Speichern Sie das ausgewählte Theme in localStorage und stellen Sie es beim Laden der Seite wieder her:

<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- gegenüber JS-Animationen

Für flüssige Animationen sollten Sie CSS-Transitionen bevorzugen, die auf Änderungen benutzerdefinierter Eigenschaften reagieren, statt auf JS-Schleifen mit requestAnimationFrame. Der Browser übernimmt die Interpolation im Compositor-Thread.

Typisierte Eigenschaften mit @property

Wenn Sie eine Variable mit @property registrieren, können Browser sie in Transitionen interpolieren – bei nicht registrierten benutzerdefinierten Eigenschaften funktioniert das nicht:

<div class="track">
  <div class="bar"></div>
</div>

Schnellüberprüfung

Welche JavaScript-Methode ändert eine benutzerdefinierte CSS-Eigenschaft am Wurzelelement?

Zusammenfassung

Verwenden Sie style.setProperty(), um benutzerdefinierte CSS-Eigenschaften aus JavaScript zu aktualisieren. Änderungen werden sofort an alle Elemente weitergegeben, die die Eigenschaft verwenden. Dieses Muster ermöglicht dynamische Themes, animierte Fortschrittsbalken, Cursor-Effekte und scrollgesteuerte Animationen – und das alles, ohne Klassenlisten oder Inline-Style-Strings für mehrere Eigenschaften anzupassen.

Häufig gestellte Fragen

Ist die Lektion „Variablen mit JavaScript aktualisieren“ kostenlos?

Ja — der vollständige Text von „Variablen mit JavaScript aktualisieren“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des CSS Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der CSS Academy-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „Variablen mit JavaScript aktualisieren“?

Aktualisieren Sie CSS Custom Properties dynamisch aus JavaScript mit style.setProperty(). Du übst CSS Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um CSS Academy zu starten?

Keine Vorkenntnisse erforderlich. CSS Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 4 von 4.

Wie lange dauert die Lektion „Variablen mit JavaScript aktualisieren“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser CSS Academy-Lektion Code schreiben und ausführen?

Ja. Jede CSS Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

  1. Benutzerdefinierte Eigenschaften deklarieren und verwenden
  2. Fallback-Werte und var()
  3. Variablen auf Komponenten begrenzen
  4. Variablen mit JavaScript aktualisieren
← Zurück zu CSS Academy