Das Klassenattribut kann in CSS verwendet werden, um einige Aufgaben für die Elemente mit dem entsprechenden Klassennamen zu erledigen. In diesem Artikel besprechen wir, wie man mit JavaScript eine Klasse zu einem Element hinzufügt. In JavaScript gibt es einige Ansätze, einem Element eine Klasse hinzuzufügen. Wir können das nutzen .Klassenname Eigentum oder die .hinzufügen() Methode, um dem jeweiligen Element einen Klassennamen hinzuzufügen.
Lassen Sie uns nun die Ansätze zum Hinzufügen einer Klasse zu einem Element besprechen.
Verwendung der Eigenschaft .className
Der .Klassenname Die Eigenschaft legt den Klassennamen eines Elements fest. Mit dieser Eigenschaft kann der Wert des Klassenattributs eines Elements zurückgegeben werden. Mit dieser Eigenschaft können wir einem HTML-Element eine Klasse hinzufügen, ohne die vorhandene Klasse zu ersetzen.
Um mehrere Klassen hinzuzufügen, müssen wir ihre Namen durch Leerzeichen trennen, z 'Klasse1 Klasse2' .
Wenn für ein Element bereits eine Klasse deklariert ist und wir demselben Element einen neuen Klassennamen hinzufügen müssen, sollte diese durch Einfügen eines Leerzeichens vor dem Schreiben des neuen Klassennamens deklariert werden. Andernfalls wird der vorhandene Klassenname überschrieben. Es kann wie folgt geschrieben werden:
document.getElementById('div1').className = ' newClass';
Im obigen Code haben wir zuvor ein Leerzeichen eingefügt neueKlasse .
Syntax
Die häufig verwendete Syntax dieser Eigenschaft zum Festlegen oder Zurückgeben des Klassennamens ist unten angegeben.
Um den Klassennamen festzulegen
element.className = class
Um den Klassennamen zurückzugeben
element.className
Das Beispiel der Verwendung von .Klassenname Die Eigenschaft wird wie folgt angegeben.
Beispiel – Hinzufügen des Klassennamens
In diesem Beispiel verwenden wir die .Klassenname Eigenschaft zum Hinzufügen der 'für' Klasse zum Absatzelement mit der ID 'p1' . Wir wenden das CSS mithilfe des Klassennamens auf den entsprechenden Absatz an 'für' .
Wir müssen auf das Gegebene klicken HTML-Schaltfläche „Klasse hinzufügen“ um den Effekt zu sehen.
add class name using JavaScript .para { font-size: 30px; background-color: yellow; color: blue; border: 2px dotted red; } <p id="p1"> Welcome to the javaTpoint.com </p> <p> Click the following button to see the effect. </p> Add Class function fun() { var a = document.getElementById('p1'); a.classList.add('para'); } Testen Sie es jetzt Ausgabe
Nachdem Sie auf die angegebene Schaltfläche geklickt haben, lautet die Ausgabe:
