Wie entferne ich eine CSS-Klasse aus einem Element mit nativem JavaScript?

CSS-Klasse aus einem Element mit nativem JavaScript entfernen

Das Entfernen einer CSS-Klasse aus einem HTML-Element mithilfe von JavaScript kann erreicht werden, ohne auf Drittanbieter angewiesen zu sein. Partybibliotheken wie jQuery. Nachfolgend finden Sie eine Schritt-für-Schritt-Anleitung:

1. Identifizieren Sie das Zielelement:

Verwenden Sie die Methode document.querySelector(), um das HTML-Element auszuwählen, aus dem Sie die Klasse entfernen möchten. Geben Sie die ID des Elements oder eine andere eindeutige Kennung an.

2. Verwenden Sie die classList-Eigenschaft:

Moderne Browser unterstützen die classList-Eigenschaft für jedes Element. Diese Eigenschaft stellt eine Liste der auf das Element angewendeten CSS-Klassen dar.

3. Entfernen Sie die Klasse:

Um eine Klasse zu entfernen, verwenden Sie einfach die Methode classList.remove() und übergeben Sie den Klassennamen als Argument. Zum Beispiel:

const element = document.querySelector('#element');
element.classList.remove('red');

Beispiel:

Das folgende Code-Snippet zeigt praxisnah, wie man die „rote“ CSS-Klasse aus einem Element entfernt Szenario:

const button = document.querySelector('#remove');
const element = document.querySelector('#el');

button.onclick = () => {
  element.classList.remove('red');
};

HTML:

<div>

CSS:

.red {
  background: red;
}

Wenn die Meldung „Klasse entfernen Wenn Sie auf die Schaltfläche „klicken“, wird die „rote“ CSS-Klasse aus dem Element entfernt und ihre Hintergrundfarbe auf die Standardfarbe geändert.

Das obige ist der detaillierte Inhalt vonWie entferne ich eine CSS-Klasse aus einem Element mit nativem JavaScript?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!