Heim > Web-Frontend > js-Tutorial > Wie füge ich mit JavaScript eine Klasse zu einem HTML-Element hinzu?

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

Susan Sarandon
Freigeben: 2024-12-22 14:00:24
Original
737 Leute haben es durchsucht

How to Add a Class to an HTML Element Using JavaScript?

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");
Nach dem Login kopieren

Um die Klasse zu entfernen später:

element.classList.remove("my-class");
Nach dem Login kopieren

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";
Nach dem Login kopieren

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!

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage