Styles im DOM bearbeiten

Bei der Arbeit mit dem Document Object Model (DOM) in JavaScript ist das Bearbeiten von Styles eine häufige Anforderung. Dieser Artikel behandelt verschiedene Methoden zum Anwenden von Styles auf DOM-Elemente, einschließlich Inline-Styles, dem Festlegen von Styles über die style-Eigenschaft und dem Manipulieren von Klassen mit den classList-Methoden. Am Ende dieses Leitfadens verfügen Sie über das Wissen, um Styles in Ihren Webprojekten effektiv zu verwalten und zu ändern.

Inline-Styles

Inline-Styles ermöglichen es Ihnen, CSS direkt über das style-Attribut auf ein HTML-Element anzuwenden. Dieser Ansatz ist nützlich für schnelle, einmalige Style-Änderungen, wird jedoch aufgrund mangelnder Skalierbarkeit und Trennung der Belange (Separation of Concerns) nicht für die Pflege großer Projekte empfohlen.

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>

Try it Yourself »

In diesem Beispiel werden durch einen Klick auf die Schaltfläche Inline-Styles auf das div-Element angewendet, wodurch die Textfarbe in Rot und die Schriftgröße auf 20 Pixel geändert wird.

Festlegen von Styles über die style-Eigenschaft

Die style-Eigenschaft in JavaScript ermöglicht es Ihnen, die CSS-Eigenschaften eines Elements dynamisch zu ändern. Diese Methode bietet mehr Flexibilität als Inline-Styles und erlaubt es Ihnen, Styles programmatisch anzupassen.

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>

Try it Yourself »

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

Klassenmanipulation

Das Verwalten von Klassen ist eine leistungsstarke Methode, um Styles modular und wiederverwendbar auf Elemente anzuwenden. Die classList-Eigenschaft bietet Methoden zum Hinzufügen, Entfernen, Umschalten und Überprüfen von Klassen auf einem Element. Für fortgeschrittenere Manipulationen stehen auch classList.replace() und classList.item() zur Verfügung.

Klassen hinzufügen

Die Methode add() fügt einem Element eine oder mehrere Klassen hinzu.

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>

Try it Yourself »

In diesem Beispiel fügt ein Klick auf die Schaltfläche die Klassen highlight und text-large zum div-Element hinzu und wendet die entsprechenden Styles an.

Klassen entfernen

Die Methode remove() entfernt eine oder mehrere Klassen von einem Element.

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>

Try it Yourself »

Hier entfernt ein Klick auf die Schaltfläche die Klassen highlight und text-large vom div-Element.

Klassen umschalten

Die Methode toggle() fügt eine Klasse hinzu, wenn sie nicht vorhanden ist, und entfernt sie, wenn sie vorhanden ist.

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>

Try it Yourself »

In diesem Beispiel schaltet ein Klick auf die Schaltfläche die Klasse highlight auf dem div-Element ein und aus.

Vorhandensein von Klassen prüfen

Die Methode contains() prüft, ob ein Element eine bestimmte Klasse besitzt.

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>

Try it Yourself »

Hier prüft ein Klick auf die Schaltfläche, ob das Element containsClassExample die Klasse highlight besitzt, und zeigt entsprechend eine Meldung an.

Praxisbeispiel: Interaktive To-Do-Liste

Um diese Konzepte in einem realen Szenario zu demonstrieren, erstellen wir eine einfache interaktive To-Do-Liste, auf der wir Aufgaben hinzufügen und entfernen sowie dynamisch Styles anwenden können, um abgeschlossene Aufgaben anzuzeigen.

---

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

Try it Yourself »

In diesem Beispiel erstellen wir eine To-Do-Liste, auf der Aufgaben hinzugefügt und durch einen Klick als abgeschlossen markiert werden können. Die Klasse task formatiert die Aufgaben, während die Klasse completed, die über die Methode toggle() angewendet wird, abgeschlossene Aufgaben anzeigt.

Best Practices

Um effizienten und wartbaren Code bei der Arbeit mit Styles im DOM zu gewährleisten, beachten Sie die folgenden Best Practices:

1. Trennung der Belange (Separation of Concerns): Halten Sie HTML, CSS und JavaScript getrennt. Verwenden Sie JavaScript, um Klassen zu manipulieren, anstatt Styles direkt festzulegen, wann immer dies möglich ist. Dieser Ansatz wahrt die Trennung der Belange und erleichtert die Verwaltung Ihres Codes.
2. Inline-Styles vermeiden: Nutzen Sie Inline-Styles nur sparsam. Diese können Ihren HTML-Code unübersichtlich machen und die Wartung erschweren. Bevorzugen Sie stattdessen das Hinzufügen und Entfernen von Klassen, die in Ihrem CSS definiert sind.
3. Klassen für Wiederverwendbarkeit nutzen: Definieren Sie wiederverwendbare Klassen in Ihrem CSS und verwenden Sie JavaScript, um diese Klassen umzuschalten. Dieser Ansatz ermöglicht ein konsistenteres Styling in Ihrer gesamten Anwendung und erleichtert die Aktualisierung von Styles.
4. classList-Methoden nutzen: Verwenden Sie die classList-Methoden (add, remove, toggle, contains), um Klassen effizient zu verwalten. Diese Methoden sind einfach zu handhaben und bieten im Vergleich zur direkten Manipulation der className-Eigenschaft eine bessere Performance.
5. Performance-Aspekte: Achten Sie bei der DOM-Manipulation auf die Performance. Fassen Sie Style-Änderungen zusammen, um Reflows und Repaints zu minimieren, da diese die Performance beeinträchtigen können, insbesondere in komplexen oder großen Anwendungen.

INFO

Verwenden Sie CSS-Transitions und Animationen für flüssigere visuelle Effekte anstelle von JavaScript-basierten Animationen, da diese performanter und einfacher zu verwalten sind.

Fazit

Das Verständnis und die Manipulation von Styles im DOM sind entscheidend für die Erstellung dynamischer und interaktiver Webanwendungen. Durch die Verwendung von Inline-Styles, der style-Eigenschaft und den Klassenmanipulationsmethoden der classList-Eigenschaft können Sie eine Vielzahl von Styling-Effekten erzielen und die Benutzererfahrung auf Ihrer Website verbessern.

Practice

Welche der folgenden classList-Methoden wird verwendet, um einem Element eine oder mehrere Klassen hinzuzufügen?

add()remove()toggle()contains()