Wie füge ich mit JavaScript eine Klasse zu einem HTML-Element hinzu?

Hinzufügen einer Klasse zu einem Element in JavaScript

Einführung:
Verbesserung der Funktionalität eines Elements auf Eine Webseite erfordert oft die Manipulation ihrer CSS-Klassen. Durch das Hinzufügen einer neuen Klasse können dem Element zusätzliche Stile oder Verhaltensweisen hinzugefügt werden. In dieser Antwort wird erläutert, wie Sie mithilfe von JavaScript eine Klasse zu einem Element hinzufügen und dabei die Unterstützung für moderne Browser und ältere Browser in Betracht ziehen.

Moderne Browser (Element.classList)
Für moderne Browser, einschließlich In Chrome, Firefox und Safari bietet die Methode element.classList.add() eine effiziente Möglichkeit, eine Klasse zu einem Element hinzuzufügen:

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

Um die Klasse zu entfernen später:

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

Legacy-Browser (className-Eigenschaft)
Für Browser wie Internet Explorer 9 und niedriger kann die className-Eigenschaft des Elements verwendet werden, um eine neue Klasse hinzuzufügen :

var d = document.getElementById("div1");
d.className += " otherclass";

Stellen Sie sicher, dass vor dem neuen Klassennamen ein Leerzeichen steht, um eine Gefährdung bestehender Klassen im zu vermeiden list.

Hinweis: Die Eigenschaft element.className kann auch in modernen Browsern verwendet werden, aber classList ist im Allgemeinen ein saubererer und effizienterer Ansatz.

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