Wie kann ich mit JavaScript eine Klasse zu einem HTML-Element hinzufügen?

Hinzufügen einer Klasse zu einem vorhandenen Element

In HTML können wir Elementen Klassen zuweisen, um sie mithilfe von CSS zu stilisieren und zu identifizieren. Manchmal müssen wir mithilfe von JavaScript dynamisch eine zusätzliche Klasse zu einem vorhandenen Element hinzufügen. Dieses Tutorial behandelt zwei Methoden, um dies zu erreichen, die sich an moderne und ältere Browser richten.

Moderne Browser (IE9):

Die classList-Eigenschaft bietet eine einfache Möglichkeit, die zu manipulieren Klassen eines Elements. So fügen Sie eine Klasse hinzu:

element.classList.add("my-class");

Legacy-Browser (IE8-):

Für ältere Browser müssen wir die className-Eigenschaft direkt bearbeiten. Wir müssen jedoch die im Element vorhandenen vorhandenen Klassen sorgfältig berücksichtigen.

Schritte:

1. Weisen Sie dem Element eine ID zu, um den Zugriff in JavaScript zu erleichtern.
2. Verwenden Sie den folgenden JavaScript-Code, um die Klasse hinzuzufügen:

var d = document.getElementById("elementID");
d.className += " new-class";

Stellen Sie sicher, dass Sie die Klasse einschließen ein Leerzeichen vor dem neuen Klassennamen, um ein Überschreiben vorhandener Klassen zu vermeiden.

Das obige ist der detaillierte Inhalt vonWie kann ich mit JavaScript eine Klasse zu einem HTML-Element hinzufügen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!