Arbeiten mit Styles im DOM

Beim Arbeiten mit dem Document Object Model (DOM) in JavaScript gehört das Ändern des Erscheinungsbilds eines Elements zur Laufzeit zu den häufigsten Aufgaben. Dieser Leitfaden behandelt die praktischen Methoden, um Styles auf DOM-Elemente anzuwenden: das Schreiben von Inline-Styles, das Lesen und Setzen einzelner CSS-Eigenschaften über die style-Eigenschaft, das Ersetzen vieler Eigenschaften auf einmal mit cssText, das Lesen der tatsächlich aufgelösten Styles mit getComputedStyle() sowie – die empfohlene Vorgehensweise für die meisten Fälle – das Umschalten von CSS-Klassen mit der classList-API.

Kurz gesagt: Klassen gegenüber Inline-Styles bevorzugen. Die direkte Style-Manipulation ist sinnvoll für Werte, die zur Laufzeit berechnet werden (eine Position, eine dynamisch gewählte Farbe). Für alles, was einen Zustand repräsentiert – „aktiv", „abgeschlossen", „Fehler" – sollte man die Klasse in CSS definieren und sie über JavaScript umschalten. Dieser Leitfaden zeigt beides und erklärt, wann welches Werkzeug das richtige ist. Einen umfassenderen Überblick über das Element-Styling bietet Styles und Klassen.

Inline-Styles

Inline-Styles wenden CSS direkt auf ein HTML-Element über sein style-Attribut an. Sie eignen sich für schnelle, einmalige Änderungen, skalieren jedoch nicht gut: Sie mischen Darstellung in das Markup, sind nicht wiederverwendbar und gewinnen jeden Spezifitätskonflikt – außer !important –, was sie später schwer zu überschreiben macht.

Beispiel

<div id="inlineStyleExample">This text will be styled using inline styles.</div>
<button onclick="applyInlineStyle()">Apply Inline Style</button>

<script>
  function applyInlineStyle() {
    const element = document.getElementById('inlineStyleExample');
    element.style.color = 'red';
    element.style.fontSize = '20px';
  }
</script>

In diesem Beispiel werden beim Klicken auf die Schaltfläche Inline-Styles auf das div-Element angewendet, die die Textfarbe auf Rot und die Schriftgröße auf 20 Pixel ändern.

Styles mit der style-Eigenschaft setzen

Die style-Eigenschaft liefert ein CSSStyleDeclaration-Objekt, das dem Inline-Style des Elements entspricht. Das Lesen und Schreiben dieser Eigenschaft entspricht dem Bearbeiten des style-Attributs in JavaScript – mit denselben Vor- und Nachteilen wie Inline-Styles, erlaubt aber das dynamische Berechnen von Werten.

Zwei Regeln bereiten häufig Probleme:

• CSS-Eigenschaftsnamen werden zu camelCase. Eigenschaften mit Bindestrich wie font-size und background-color werden zu style.fontSize und style.backgroundColor. Die einzige Ausnahme ist float, das als style.cssFloat geschrieben wird, weil float ein reserviertes Wort ist.
• Werte sind Strings mit Einheiten. element.style.width = 200 bewirkt nichts; es muss element.style.width = '200px' lauten. Ebenso liefert element.style.color nach dem Setzen einen String wie 'rgb(0, 0, 255)' zurück.

Beispiel

<div id="stylePropertyExample">This text will be styled using JavaScript.</div>
<button onclick="applyStyleProperty()">Apply Style Property</button>

<script>
  function applyStyleProperty() {
    const element = document.getElementById('stylePropertyExample');
    element.style.color = 'blue';
    element.style.fontSize = '18px';
    element.style.margin = '10px';
  }
</script>

In diesem Beispiel werden beim Klicken auf die Schaltfläche mehrere Styles auf das div-Element über die style-Eigenschaft angewendet. Die Textfarbe wird auf Blau gesetzt, die Schriftgröße auf 18 Pixel, und ein Abstand von 10 Pixeln wird hinzugefügt.

Viele Eigenschaften auf einmal mit cssText setzen

Das Zuweisen einer Eigenschaft nach der anderen löst jedes Mal einen separaten Schreibvorgang aus. Wenn mehrere Eigenschaften zusammen gesetzt werden sollen, ermöglicht style.cssText die Zuweisung in einer einzigen Anweisung mit gewöhnlicher CSS-Syntax:

element.style.cssText = 'color: white; background-color: navy; padding: 8px;';

Zu beachten ist, dass die Zuweisung von cssText alle vorhandenen Inline-Styles ersetzt. Es empfiehlt sich daher, es zum Setzen eines vollständigen Blocks zu verwenden, nicht zum Anpassen eines einzelnen Werts. Um eine einzelne Eigenschaft zu entfernen, setzt man sie auf einen leeren string (element.style.color = '') oder ruft element.style.removeProperty('color') auf.

Den tatsächlichen Style mit getComputedStyle() lesen

Die style-Eigenschaft spiegelt nur Inline-Styles wider. Wenn eine Farbe aus einem Stylesheet oder einer Klasse stammt, ist element.style.color ein leerer string. Um den Wert zu lesen, den der Browser tatsächlich angewendet hat – nachdem Stylesheets, Klassen und Vererbung aufgelöst wurden –, verwendet man window.getComputedStyle():

<p id="styledByCss">I am styled by a stylesheet.</p>
<button onclick="readStyle()">Read computed color</button>

<script>
  function readStyle() {
    const element = document.getElementById('styledByCss');
    // element.style.color would be '' — the color comes from CSS, not inline.
    const computed = window.getComputedStyle(element);
    alert('Computed color: ' + computed.color);
  }
</script>

<style>
  #styledByCss {
    color: green;
  }
</style>

Berechnete Werte werden in normalisierter, schreibgeschützter Form zurückgegeben – Farben als rgb(...), Längenangaben in px –, sodass getComputedStyle(element).color den Wert 'rgb(0, 128, 0)' statt 'green' liefert.

Klassen-Manipulation

Die Verwaltung von Klassen ist der empfohlene Weg, Elemente zu gestalten: Das Styling befindet sich im CSS, und JavaScript schaltet lediglich Klassen ein und aus. Die classList-Eigenschaft bietet eine kleine, gut benannte API – add(), remove(), toggle(), contains(), replace() und item() – die klarer und sicherer ist als das manuelle Zusammensetzen von Strings mit className.

Warum classList gegenüber className bevorzugen? Das Schreiben von element.className = 'highlight' überschreibt alle vorhandenen Klassen, sodass versehentlich Klassen entfernt werden könnten, auf die andere Teile des Codes angewiesen sind. classList.add('highlight') fügt nur diese eine Klasse hinzu und lässt alle anderen unberührt.

Klassen hinzufügen

Die add()-Methode fügt einem Element eine oder mehrere Klassen hinzu. Das Hinzufügen einer bereits vorhandenen Klasse hat keine Wirkung, sodass sie gefahrlos wiederholt aufgerufen werden kann.

Beispiel

<div id="addClassExample">This element will have classes added.</div>
<button onclick="addClass()">Add Class</button>

<script>
  function addClass() {
    const element = document.getElementById('addClassExample');
    element.classList.add('highlight', 'text-large');
  }
</script>

<style>
  .highlight {
    background-color: yellow;
  }

  .text-large {
    font-size: 24px;
  }
</style>

In diesem Beispiel werden beim Klicken auf die Schaltfläche die Klassen highlight und text-large zum div-Element hinzugefügt und die entsprechenden Styles angewendet.

Klassen entfernen

Die remove()-Methode entfernt eine oder mehrere Klassen von einem Element. Das Entfernen einer nicht vorhandenen Klasse ist eine No-Op, sodass keine vorherige Überprüfung notwendig ist.

Beispiel

<div id="removeClassExample" class="highlight text-large">
  This element will have classes removed.
</div>
<button onclick="removeClass()">Remove Class</button>

<script>
  function removeClass() {
    const element = document.getElementById('removeClassExample');
    element.classList.remove('highlight', 'text-large');
  }
</script>

<style>
  .highlight {
    background-color: yellow;
  }

  .text-large {
    font-size: 24px;
  }
</style>

Hier werden beim Klicken auf die Schaltfläche die Klassen highlight und text-large vom div-Element entfernt.

Klassen umschalten

Die toggle()-Methode fügt eine Klasse hinzu, wenn sie nicht vorhanden ist, und entfernt sie, wenn sie vorhanden ist – ideal für Ein/Aus-Zustände wie ein geöffnetes Menü oder eine abgeschlossene Aufgabe. Sie gibt true zurück, wenn die Klasse danach vorhanden ist, und false andernfalls.

Das Ergebnis kann auch mit einem zweiten boolean-Argument erzwungen werden: toggle('active', true) fügt die Klasse immer hinzu, und toggle('active', false) entfernt sie immer. Dies ist praktisch, wenn der gewünschte Zustand aus einer Variablen stammt: element.classList.toggle('active', isActive).

Beispiel

<div id="toggleClassExample">Click me to toggle the highlight class.</div>
<button onclick="toggleClass()">Toggle Class</button>

<script>
  function toggleClass() {
    const element = document.getElementById('toggleClassExample');
    element.classList.toggle('highlight');
  }
</script>

<style>
  .highlight {
    background-color: yellow;
  }

  .text-large {
    font-size: 24px;
  }
</style>

In diesem Beispiel wird beim Klicken auf die Schaltfläche die Klasse highlight am div-Element ein- und ausgeschaltet.

Auf Klassen prüfen

Die contains()-Methode gibt true zurück, wenn ein Element eine bestimmte Klasse hat, und false andernfalls. Sie kann verwendet werden, um anhand des aktuellen Zustands zu verzweigen, beispielsweise um die Beschriftung einer Schaltfläche zu aktualisieren.

Beispiel

<div id="containsClassExample" class="highlight">
  This element's classes will be checked.
</div>
<button onclick="checkClass()">Check Class</button>

<script>
  function checkClass() {
    const element = document.getElementById('containsClassExample');
    if (element.classList.contains('highlight')) {
      alert('The element has the highlight class.');
    } else {
      alert('The element does not have the highlight class.');
    }
  }
</script>

<style>
  .highlight {
    background-color: yellow;
  }

  .text-large {
    font-size: 24px;
  }
</style>

Hier wird beim Klicken auf die Schaltfläche geprüft, ob das Element containsClassExample die Klasse highlight hat, und ein entsprechender Hinweis angezeigt.

Eine Klasse ersetzen

Die replace()-Methode tauscht eine Klasse gegen eine andere in einem einzigen Aufruf aus und gibt true zurück, wenn die alte Klasse vorhanden war und ersetzt wurde. Sie ist übersichtlicher als der Aufruf von remove() gefolgt von add():

<div id="replaceClassExample" class="theme-light">Switch my theme.</div>
<button onclick="swapTheme()">Toggle theme</button>

<script>
  function swapTheme() {
    const element = document.getElementById('replaceClassExample');
    if (!element.classList.replace('theme-light', 'theme-dark')) {
      // It wasn't 'theme-light', so swap the other way.
      element.classList.replace('theme-dark', 'theme-light');
    }
  }
</script>

<style>
  .theme-light { background: #fff; color: #111; padding: 8px; }
  .theme-dark { background: #111; color: #fff; padding: 8px; }
</style>

classList ist außerdem iterierbar, und classList.item(index) gibt die Klasse an einer bestimmten Position zurück (oder null, wenn der Index außerhalb des Bereichs liegt), was gelegentlich nützlich ist, wenn die Klassen einzeln gelesen werden sollen.

Praxisbeispiel: Interaktive To-Do-Liste

Um diese Konzepte in einem realistischen Szenario zu demonstrieren, bauen wir eine kleine interaktive To-Do-Liste. Neue Aufgaben werden der Liste hinzugefügt, und das Klicken auf eine Aufgabe schaltet eine completed-Klasse um, die sie durchstreicht – ein Lehrbuchfall für classList.toggle().

<div>
  <h2>To-Do List</h2>
  <p>Here, you can add new items, and mark it as completed by clicking on them.</p>
  <input type="text" id="newTask" placeholder="Add a new task" />
  <button id="addTaskButton">Add Task</button>
  <ul id="taskList"></ul>
</div>

<script>
  const newTaskInput = document.getElementById('newTask');
  const addTaskButton = document.getElementById('addTaskButton');
  const taskList = document.getElementById('taskList');

  addTaskButton.addEventListener('click', () => {
    const taskText = newTaskInput.value;
    if (taskText) {
      const taskItem = document.createElement('li');
      taskItem.textContent = taskText;
      taskItem.classList.add('task');

      taskItem.addEventListener('click', () => {
        taskItem.classList.toggle('completed');
      });

      taskList.appendChild(taskItem);
      newTaskInput.value = '';
    }
  });
</script>

<style>
  .task {
    cursor: pointer;
    padding: 5px;
    border-bottom: 1px solid #ccc;
  }

  .task.completed {
    text-decoration: line-through;
    color: gray;
  }
</style>

In diesem Beispiel erstellen wir eine To-Do-Listen-Anwendung, in der Aufgaben hinzugefügt und durch Klicken als abgeschlossen markiert werden können. Die Klasse task gestaltet die Aufgaben, während die Klasse completed, die mit der toggle()-Methode angewendet wird, abgeschlossene Aufgaben kennzeichnet.

Best Practices

Um effizienten und wartbaren Code beim Arbeiten mit Styles im DOM zu gewährleisten, sollten folgende Best Practices berücksichtigt werden:

1. Trennung der Verantwortlichkeiten: HTML, CSS und JavaScript sollten getrennt gehalten werden. Wann immer möglich, sollte JavaScript verwendet werden, um Klassen zu manipulieren, anstatt Styles direkt zu setzen. Dieser Ansatz wahrt die Trennung der Verantwortlichkeiten und erleichtert die Verwaltung des Codes.
2. Inline-Styles vermeiden: Inline-Styles sollten sparsam eingesetzt werden. Sie können das HTML unübersichtlich und schwerer wartbar machen. Stattdessen ist es vorzuziehen, Klassen hinzuzufügen und zu entfernen, die in CSS definiert sind.
3. Klassen für Wiederverwendbarkeit nutzen: Wiederverwendbare Klassen in CSS definieren und JavaScript verwenden, um diese Klassen umzuschalten. Dieser Ansatz ermöglicht ein konsistenteres Styling in der gesamten Anwendung und erleichtert die Aktualisierung von Styles.
4. classList-Methoden nutzen: Die classList-Methoden (add, remove, toggle, contains) sollten verwendet werden, um Klassen effizient zu verwalten. Diese Methoden sind übersichtlich und schneller als die direkte Manipulation der className-Eigenschaft.
5. Performance-Überlegungen: Bei der DOM-Manipulation sollte auf die Performance geachtet werden. Das Umschalten einer einzelnen Klasse löst einen Satz von Style-Neuberechnungen aus, während das einzelne Setzen vieler Eigenschaften über element.style zu wiederholten Reflows führen kann. Weiterführende Hinweise bietet DOM Performance Optimization.

Fazit

Die Manipulation von Styles im DOM ist essenziell für dynamische, interaktive Oberflächen. Die style-Eigenschaft (und cssText) sollte für Werte verwendet werden, die zur Laufzeit berechnet werden, getComputedStyle() zum Lesen der tatsächlich vom Browser angewendeten Styles, und die classList-API – add, remove, toggle, contains, replace – für alles, was einen wiederverwendbaren Zustand darstellt. Als Faustregel gilt: zuerst Klassen in Betracht ziehen und Inline-Styles nur verwenden, wenn es unbedingt notwendig ist.

Um den Umgang mit dem DOM weiter zu vertiefen, empfehlen sich DOM Manipulation, Selecting DOM Elements und Attributes and Properties.

Übungen