Wie kann ich mithilfe von JavaScript Klassen zu HTML-Elementen hinzufügen oder daraus entfernen?

Hinzufügen einer Klasse zu einem Element mit JavaScript

Bei der Arbeit mit HTML-Elementen ist es häufig erforderlich, Klassen dynamisch mithilfe von JavaScript hinzuzufügen oder zu entfernen . Angenommen, Sie haben ein Element mit dem folgenden HTML-Code:

<div class="someclass">
    <img  ... alt="Wie kann ich mithilfe von JavaScript Klassen zu HTML-Elementen hinzufügen oder daraus entfernen?" ><p>Und Sie möchten eine JavaScript-Funktion erstellen, die dem obigen div-Element eine weitere Klasse hinzufügt.</p>
<p><strong> Moderne Browser</strong></p>
<p>Wenn Sie nur auf moderne Browser abzielen, die die Eigenschaft Element.classList unterstützen, ist die Lösung unkompliziert. Verwenden Sie einfach die Methode classList.add(), um dem Element eine neue Klasse hinzuzufügen:</p>
<pre class="brush:php;toolbar:false">element.classList.add("my-class");

Um eine Klasse zu entfernen, verwenden Sie die Methode classList.remove():

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

Internet Explorer 9 und niedriger

Für ältere Browser wie Internet Explorer 9 oder niedriger, die die classList-Eigenschaft nicht unterstützen, Sie können die Eigenschaft className verwenden. Weisen Sie dem Element zunächst eine ID zu, um das Abrufen zu erleichtern:

<div>
<p>Verketten Sie dann den neuen Klassennamen mit dem vorhandenen und stellen Sie sicher, dass zwischen ihnen ein Leerzeichen eingefügt wird:</p>
<pre class="brush:php;toolbar:false">var d = document.getElementById("div1");
d.className += " otherclass";

Denken Sie daran, das Leerzeichen vor dem neuen Klassennamen einzufügen, um Konflikte mit vorhandenen Klassen in der Klassenliste zu vermeiden.

Mit diesen Ansätzen können Sie Klassen dynamisch hinzufügen oder entfernen aus jedem HTML-Element mithilfe von JavaScript und bietet so Flexibilität und Kontrolle über das Design Ihrer Webseiten.