Het class-attribuut kan in CSS worden gebruikt om bepaalde taken uit te voeren voor de elementen met de bijbehorende klassenaam. In dit artikel bespreken we hoe u een klasse aan een element kunt toevoegen met behulp van JavaScript. In JavaScript , zijn er enkele manieren om een klasse aan een element toe te voegen. Wij kunnen gebruik maken van de .naam van de klasse eigendom of de .toevoegen() methode om een klassenaam aan het specifieke element toe te voegen.
Laten we nu de benaderingen bespreken om een klasse aan een element toe te voegen.
De eigenschap .className gebruiken
De .naam van de klasse eigenschap stelt de klassenaam van een element in. Deze eigenschap kan worden gebruikt om de waarde van het class-attribuut van een element terug te geven. We kunnen deze eigenschap gebruiken om een klasse aan een HTML-element toe te voegen zonder de bestaande klasse te vervangen.
Om meerdere klassen toe te voegen, moeten we hun naam scheiden met een spatie, zoals 'klas1 klas2' .
Als er al een klasse is gedeclareerd voor een element, en we moeten een nieuwe klassenaam toevoegen aan hetzelfde element, dan moet deze worden gedeclareerd door een spatie in te voegen voordat de nieuwe klassenaam wordt geschreven, anders wordt de bestaande klassenaam overschreven. Het kan als volgt worden geschreven:
document.getElementById('div1').className = ' newClass';
In de bovenstaande code hebben we eerder een spatie ingevoegd nieuweKlasse .
Syntaxis
Hieronder vindt u de veelgebruikte syntaxis van deze eigenschap om de klassenaam in te stellen of terug te geven.
Om de klassenaam in te stellen
element.className = class
Om de klassenaam terug te geven
element.className
Het voorbeeld van het gebruik van de .naam van de klasse eigendom wordt als volgt gegeven.
Voorbeeld - Het toevoegen van de klassenaam
In dit voorbeeld gebruiken we de .naam van de klasse eigenschap voor het toevoegen van de 'voor' class toe aan het paragraafelement met id 'p1' . We passen de CSS toe op de overeenkomstige paragraaf met behulp van de klassenaam 'voor' .
We moeten op het gegeven klikken HTML-knop 'Klasse toevoegen' om het effect te zien.
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'); } Test het nu Uitvoer
Nadat u op de gegeven knop hebt geklikt, zal de uitvoer zijn:
