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

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!