Wie ändert man die Klasse eines Elements mit JavaScript?

Verwendung der className-Eigenschaft

Die className-Eigenschaft ändert die Klasse eines Elements. Um alle Klassen zu ersetzen, verwenden Sie:

element.className = "neueKlasse";

Um eine neue Klasse hinzuzufügen, ohne bestehende zu entfernen:

element.className += " neueKlasse";

Um eine Klasse zu entfernen:

element.className = element.className.replace("zuEntfernendeKlasse", "");

element.className = element.className.replace("zuEntfernendeKlasse", "").trim();

Verwendung der classList-API

Die classList-API bietet Methoden zur Klassenmanipulation:

// Eine Klasse hinzufügen
element.classList.add("neueKlasse");

// Eine Klasse entfernen
element.classList.remove("alteKlasse");

// Eine Klasse umschalten (hinzufügen, wenn nicht vorhanden, entfernen, wenn vorhanden)
element.classList.toggle("umschaltKlasse");

Diese Methoden funktionieren in modernen Browsern, könnten aber in älteren Versionen des Internet Explorers nicht funktionieren. Für bessere Kompatibilität verwenden Sie ein Polyfill oder die className-Eigenschaft.

Verwendung von getElementById()

Die Methode getElementById() wählt ein einzelnes Element anhand seines ID-Attributs aus. Diese Methode ist schnell:

const element = document.getElementById('myElementId');

Diese Methode eignet sich gut, wenn Sie ein bestimmtes Element auf Ihrer Seite manipulieren möchten. Sie ist nützlich für Elemente, die sich in Ihrer HTML-Struktur nicht ändern oder verschieben.

Verwendung von querySelector() und querySelectorAll()

Diese Methoden bieten Ihnen mehr Möglichkeiten zur Auswahl von Elementen:

querySelector() wählt das erste Element aus, das dem CSS-Selektor entspricht:

const element = document.querySelector('.myClass');

querySelectorAll() wählt alle Elemente aus, die dem Selektor entsprechen, und gibt eine NodeList zurück:

const elements = document.querySelectorAll('.myClass');

Mit diesen Methoden können Sie Elemente nach verschiedenen Kriterien auswählen:

• Nach Klasse: querySelector('.className')
• Nach ID: querySelector('#idName')
• Nach Tag-Name: querySelector('div')
• Nach Attribut: querySelector('[data-attribute]')
• Nach Beziehung: querySelector('ul > li')

Sie können Selektoren für eine spezifischere Auswahl kombinieren:

const element = document.querySelector('div.myClass[data-attribute="value"]');

Diese Methoden sind hilfreich, wenn Sie Elemente basierend auf komplexen Kriterien auswählen müssen oder wenn Sie mehrere Elemente gleichzeitig manipulieren möchten.

// Wähle alle Absätze innerhalb eines div mit der Klasse 'content' aus
const paragraphs = document.querySelectorAll('div.content p');

// Durchlaufe die ausgewählten Absätze und füge eine Klasse hinzu
paragraphs.forEach(paragraph => {
  paragraph.classList.add('highlighted');
});

Umgang mit Klick-Ereignissen

Um Klassen zu ändern, wenn ein Benutzer auf ein Element klickt, können Sie die Methode addEventListener() verwenden. Diese Methode fügt dem Element einen Event-Listener hinzu, der eine Funktion ausführt, wenn das Ereignis eintritt.

So ändern Sie eine Klasse beim Klicken:

const button = document.querySelector('#myButton');

button.addEventListener('click', function() {
  this.classList.toggle('active');
});

In diesem Beispiel wird durch Klicken auf den Button die Klasse 'active' umgeschaltet.

Sie können auch Pfeilfunktionen für Event-Listener verwenden:

button.addEventListener('click', () => {
  button.classList.add('clicked');
});

Reaktion auf andere Ereignisse

Neben Klicks können Sie auch auf andere Ereignisse reagieren, um Klassen zu ändern:

1. Mouseover und mouseout:

const element = document.querySelector('#myElement');

element.addEventListener('mouseover', () => {
  element.classList.add('hovered');
});

element.addEventListener('mouseout', () => {
  element.classList.remove('hovered');
});

2. Tastendruck:

document.addEventListener('keypress', (event) => {
  if (event.key === 'Enter') {
    document.body.classList.toggle('dark-mode');
  }
});

3. Formular-Übermittlung:

const form = document.querySelector('#myForm');

form.addEventListener('submit', (event) => {
  event.preventDefault();
  form.classList.add('submitted');
});

4. Scrollen:

window.addEventListener('scroll', () => {
  const header = document.querySelector('header');
  if (window.scrollY > 100) {
    header.classList.add('scrolled');
  } else {
    header.classList.remove('scrolled');
  }
});

Diese Beispiele zeigen, wie Ereignisse verwendet werden können, um Klassenänderungen auszulösen. Durch die Kombination dieser Methoden können Sie dynamische Webseiten erstellen, die auf Benutzeraktionen reagieren.

document.querySelector('#parentElement').addEventListener('click', (event) => {
  if (event.target.matches('.childClass')) {
    event.target.classList.toggle('active');
  }
});

const element = document.querySelector('#myElement');

element.addEventListener('dblclick', () => {
  element.classList.toggle('enlarged');
});