Ändern Sie die Klasse eines HTML-Elements mit JavaScript

1. Wählen Sie ein HTML-Element in JavaScript aus
2. Ändern Sie alle Klassen, die auf ein Element in JavaScript anwendbar sind
3. Fügen Sie eine zusätzliche Klasse in das Element in JavaScript ein
4. Löschen Sie eine Klasse in einem Element in JavaScript
5. Überprüfen Sie, ob eine Klasse in einem Element in JavaScript verwendet wurde

Dieser Artikel zeigt, wie Sie die Klasse eines HTML-Elements als Reaktion auf JavaScript-Ereignisse ändern.

Wählen Sie ein HTML-Element in JavaScript aus

Unbestreitbar ist die einfachste Möglichkeit, ein HTML-Element in JavaScript auszuwählen, die Verwendung von document.getElementById().

Wenn Sie beispielsweise ein Element mit der Klassen-ID Students auswählen müssen, können Sie es wie folgt auswählen.

document.getElementById('Students')

Ändern Sie alle Klassen, die auf ein Element in JavaScript anwendbar sind

Nachdem Sie das Element anhand seiner Klassen-ID ausgewählt haben, können Sie seine Klasse ändern oder alle Klassen ersetzen, wie oben gezeigt. Sie müssen eine neue mit dem Attribut .className festlegen, um die alte Klasse zu ersetzen, wie unten gezeigt.

Document.getElementById('Fruits').classname = 'Veggies';

Fügen Sie eine zusätzliche Klasse in das Element in JavaScript ein

Sie können einem Element auch eine neue Klasse hinzufügen, ohne eine der vorhandenen Klassen zu ändern. Sie können dies tun, indem Sie den Operator += verwenden, um die neue Klasse hinzuzufügen.

Beispielsweise,

Document.getElementById('Subjects').className += 'Physics';

Es fügt anderen Klassen im Subjects-Element eine zusätzliche Klasse mit dem Namen Physik hinzu.

Löschen Sie eine Klasse in einem Element in JavaScript

Das Löschen einer einzelnen Klasse in einem Element ohne Auswirkungen auf andere Klassen ist etwas komplexer. Sie müssen den .className.replace zusammen mit dem folgenden regulären Ausdruck verwenden.

?:^|\s)RemoveThis(?!\S)/g

• ?:^|\s erfasst den Anfang einer Zeichenkette und / oder eines einzelnen verwendeten Leerzeichens.
• RemoveThis ist der Name der zu entfernenden Klasse.
• (?!\S) überprüft, ob RemoveThis ein vollständiger Klassenname ist, und prüft am Ende, ob keine Leerzeichen vorhanden sind. Mit anderen Worten wird sichergestellt, dass der reguläre Ausdruck am Ende der Zeichenkette platziert wird.
• g ist das Flag, das sicherstellt, dass der Ersetzungsbefehl in allen Fällen, in denen die Klasse hinzugefügt wurde, nach Bedarf ausgeführt wird.

Siehe das folgende Beispiel.

document.getElementById('ElementOne').className =
    document.getElementById('ElementOne')
        .className.replace(/(?:^|\s)RemoveThis(?!\S)/g, '')

Überprüfen Sie, ob eine Klasse in einem Element in JavaScript verwendet wurde

Um zu überprüfen, ob eine Klasse auf ein bestimmtes Element angewendet wurde, können Sie den obigen regulären Ausdruck verwenden. Dies wird am besten mit einem if(); erreicht. Aussage, um ein Ergebnis zu geben. Beispielsweise:

if (document.getElementById('ElementOne')
        .className.match(/(?:^|\s)ClassOne(?!\S)/))
print('Class has been used.')

Die Ausgabe lautet Klasse wurde verwendet, wenn die Prüfung positiv ausfällt, oder keine Ausgabe, wenn sie negativ ist, es sei denn, eine alternative Aktion oder Ausgabe wird mit der Anweisung else definiert.

Es ist nicht empfehlenswert, JavaScript-Code direkt in HTML-Ereignisattribute zu schreiben. Dies könnte die Ausführung und Verlangsamung von Anwendungen erschweren. Stattdessen können Sie das JavaScript in eine Funktion schreiben, indem Sie diese Funktion in einem Attribut onclick aufrufen und das Ereignis dann von HTML-Code nach JavaScript verschieben. Dies können Sie mit dem Attribut .addEventListener() erreichen.