Wie ändere ich die Klasse eines HTML-Elements mit JavaScript?

In der Phase der Gestaltung einer Webseite oder einer Website gibt es Situationen, in denen Sie aufgrund eines Updates auf bestimmte Elemente nicht mehr zugreifen müssen. Darüber hinaus, wenn einem bestimmten Element in HTML mehr als eine Klasse zugewiesen werden muss. In solchen Fall-Szenarien ist das Ändern der Klasse eines HTML-Elements in JavaScript eine große Hilfe, um solchen Situationen gerecht zu werden.

Dieser Blog zeigt die Ansätze, die beim Ändern der Klasse eines HTML-Elements in JavaScript zu berücksichtigen sind.

Wie ändere ich die Klasse eines HTML-Elements mit JavaScript?

Um die Klasse eines HTML-Elements mit JavaScript zu ändern, können folgende Ansätze angewendet werden:

• • „ Klassenname ' Eigentum.
  • „ Klassenliste ' Eigentum.

Ansatz 1: Ändern Sie die Klasse eines HTML-Elements mit JavaScript mithilfe der className-Eigenschaft

Dieser Ansatz kann wirksam werden, indem auf die erstellte Klasse zugegriffen wird, die einem Element zugeordnet ist, und ihr eine andere Klasse zugewiesen wird.

Das folgende Beispiel demonstriert das genannte Konzept.

Beispiel

Im unten angegebenen Code innerhalb des „ “-Tag, fügen Sie die folgende Überschrift in das „

' Schild. Erstellen Sie danach die angegebene Schaltfläche, der ein Standard zugewiesen wird. Klasse “, was später im Code geändert wird. Weisen Sie ihm außerdem ein „ Ich würde “ und ein angehängtes „ anklicken ” Ereignis, das die Funktion Class() aufruft.

Fügen Sie später im Code die folgende Nachricht in das „

”-Tag, um es bei der Transformation der Klasse im DOM anzuzeigen:

HTML Quelltext:

< Karosserie Stil = 'Textausrichtung: Mitte;' >
< h2 > Element ändern Klassenname

Der alte Klassenname lautet: Standardklasse

Deklarieren Sie im JS-Code eine Funktion namens „ Klasse() “. Greifen Sie hier auf die Standardklasse über ihre ID zu, indem Sie das „ document.getElementById() ' Methode. Das ' Klassenname ”-Eigenschaft transformiert die erstellte Klasse in die Klasse mit dem Namen “ neueKlasse “.

Endlich, das ' innerText ”-Eigenschaft zeigt die folgende Meldung zusammen mit der geänderten Klasse an:

JS-Code:

Ausgabe

Beobachten Sie in der obigen Ausgabe die Änderung von „ Klasse ” auf der rechten Seite, wenn Sie auf die Schaltfläche in DOM klicken.

Ansatz 2: Ändern Sie die Klasse eines HTML-Elements mit JavaScript mithilfe der classList-Eigenschaft

Dieser spezielle Ansatz kann implementiert werden, um die angegebene Klasse zu entfernen und ihr eine neue Klasse zuzuweisen, wodurch sie geändert wird.

Beispiel

Wiederholen Sie zunächst die oben besprochenen Methoden zum Einfügen einer Überschrift, Erstellen einer Schaltfläche mit der zugewiesenen Klasse, ID und dem angehängten Onclick-Ereignis, das die angegebene Funktion aufruft. Als nächstes fügen Sie in ähnlicher Weise den Überschriftenabschnitt im „

”-Tag, um den Benutzer beim Klicken auf die Schaltfläche über die geänderte Klasse zu informieren:

HTML Quelltext

< Karosserie Stil = 'Textausrichtung: Mitte;' >
< h2 > Elementklasse ändern ! h2 >
< Taste Klasse = 'Webseite' anklicken = 'Klasse()' Ich würde = 'Rückgeld' > Klick mich Taste >
< h3 Ich würde = 'Kopf' Stil = 'Hintergrundfarbe: hellgrau;' > Der alte Klassenname lautet: Website h3 >
Karosserie >

Deklarieren Sie nun eine Funktion mit dem Namen „ Klasse() “. Wenden Sie in seiner Definition das „ Klassenliste ” Eigentum zusammen mit dem “ Löschen() ” Methode, um die aufgerufene Klasse mit dem Namen “ Webseite “, was der erstellten Schaltfläche entspricht.

Weisen Sie im nächsten Schritt der gleichen Klasse eine neue Klasse zu, indem Sie die besprochene Eigenschaft mit dem „ hinzufügen() ' Methode. Zeigen Sie zuletzt die geänderte Klasse wie im vorherigen Ansatz beschrieben an:

JS-Code

Funktion Klasse ( ) {
document.getElementById ( 'Rückgeld' ) .classList.remove ( 'Webseite' )
document.getElementById ( 'Rückgeld' ) .classList.add ( 'Linux' ) ;
var access = document.getElementById ( 'Rückgeld' ) .classListe;
document.getElementById ( 'Kopf' ) .innerHTML = 'Neuer Klassenname ist: ' + Zugang;
}

Ausgabe

Dieser Artikel sollte das Konzept der Änderung der Klasse des HTML-Elements mithilfe von JavaScript klären.

Fazit

Das ' Klassenname ' und ' Klassenliste ”-Eigenschaften können verwendet werden, um die Klasse eines HTML-Elements zu ändern. Die className-Eigenschaft führte zu einem schnelleren Ansatz bei der Erfüllung der gewünschten Anforderung im Vergleich zur classList-Eigenschaft, da sie weniger Codekomplexität erforderte. Die classList-Eigenschaft hingegen ändert die Standardklasse mit Hilfe von zwei zusätzlichen Methoden. Dieser Artikel veranschaulichte die Ansätze, um die Klasse des HTML-Elements mit JavaScript zu ändern.