Heim >Web-Frontend >js-Tutorial >Wie füge ich einem HTML-Element eine neue Klasse hinzu, ohne vorhandene Klassen zu überschreiben?

Wie füge ich einem HTML-Element eine neue Klasse hinzu, ohne vorhandene Klassen zu überschreiben?

Linda Hamilton
Linda HamiltonOriginal
2024-12-10 19:59:09913Durchsuche

How to Add a New Class to an HTML Element Without Overwriting Existing Classes?

So fügen Sie einem vorhandenen Element eine zusätzliche Klasse hinzu

Ziel:
Erweitern Sie ein HTML-Element mit einer zusätzlichen Klassenqualifikation.

Szenario:
Gegeben ein Element mit einer vorhandenen Klasse, möchten wir hinzufügen eine neue Klasse, ohne die ursprüngliche zu überschreiben.

Lösung:

Für moderne Browser

Mit der classList-Eigenschaft können Sie mühelos eine Klasse hinzufügen ein Element:

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

Ähnlich, um a zu entfernen class:

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

Für Legacy-Unterstützung

Um älteren Browsern wie Internet Explorer 9 gerecht zu werden, ändern Sie die className-Eigenschaft des Elements, indem Sie ein Leerzeichen gefolgt vom neuen Klassennamen anhängen. Weisen Sie dem Element als Voraussetzung eine ID zu, um den Zugriff zu erleichtern:

<div>

Anschließend verwenden Sie JavaScript:

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

Denken Sie daran, vor „otherclass“ ein führendes Leerzeichen einzufügen, um die vorhandene Klasse beizubehalten Klassenqualifizierer.

Zusätzliche Überlegungen

Eine umfassende Dokumentation dazu finden Sie im Mozilla Developer Network (MDN). element.className.

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

Stellungnahme:
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