JavaScript classList is een DOM-eigenschap van JavaScript waarmee de CSS-klassen (Cascading Style Sheet) van een element kunnen worden vormgegeven. JavaScript classList is een alleen-lezen eigenschap die de namen van de CSS-klassen retourneert. Het is een eigenschap van JavaScript met betrekking tot de andere eigenschappen van JavaScript, waaronder stijl en className. De eigenschap style retourneert de kleur of een andere stijl van het CSS-klasse-element, en className wordt gebruikt voor het retourneren van de namen van de klassen die in het CSS-bestand worden gebruikt. De eigenschappen className en classList retourneren echter de naam van de klassen die we in het CSS-bestand hebben gebruikt, maar op verschillende manieren. De eigenschap className retourneert de naam van de klassen in de vorm van een tekenreeks, terwijl de eigenschap classList van JavaScript retourneert de naam van de klassen in de vorm van een array.

Hier zullen we een korte discussie voeren over JavaScript classList en ook de methoden ervan bespreken met hun praktische implementaties.

ubuntu welk commando

Voorbeeld van JavaScript classList-eigenschap

Hieronder ziet u een voorbeeld van de JavaScript-eigenschap classList waarmee we de klassewaarde van een element verkrijgen.

 <h3>Click on the button to get the class value </h3><br> function getClass() { var e = document.getElementById(&apos;btn&apos;); alert(e.classList); } 

De uitvoer van de bovenstaande code wordt hieronder weergegeven:

JavaScript classList-eigenschap

De eigenschap classList wordt gebruikt om de waarde van de klasse-elementen weer te geven, namelijk a DOMTokenList voorwerp. Het is een alleen-lezen eigenschap, maar we kunnen de waarde ervan wijzigen door de klassen die in het programma worden gebruikt te manipuleren. De JavaScript classList-eigenschap bestaat uit de volgende methoden waarmee we verschillende bewerkingen op de klasse-elementen kunnen uitvoeren:

toevoegen():De add() methode wordt gebruikt voor het toevoegen van een of meer klassen aan het element.verwijderen():De methode remove() wordt gebruikt om één of meer klassen te verwijderen uit het aantal klassen dat in het element aanwezig is.schakelaar():De methode toggle() wordt gebruikt voor het wisselen van de opgegeven klassenamen van een element. Het betekent dat met één klik de opgegeven klasse wordt toegevoegd en met een andere klik de klasse wordt verwijderd. Het staat bekend als de toggle-eigenschap van een element.vervangen():De methode Replace() wordt gebruikt om een ​​bestaande klasse te vervangen door een nieuwe klasse.bevat():De methode contain() van de eigenschap JavaScript classList wordt gebruikt om de Booleaanse waarde als uitvoer te retourneren. Als de klasse aanwezig is, wordt de waarde geretourneerd als true, anders wordt false geretourneerd.item():De item() methode wordt gebruikt voor het weergeven van de naam van de klassen in de specifieke index. Het retourneert dus de klassenaam.

Dit zijn enkele van de methoden die worden gebruikt in de JavaScript classList.

We zullen één voor één bespreken.

classList.add()

De functie die wordt gebruikt voor het toevoegen van een of meer klassen aan het CSS-element.

Voorbeeld:

css afbeeldingen uitlijnen

Het onderstaande voorbeeld laat zien hoe u een klasse kunt toevoegen met de methode classList.add():

 .myClass {background: red;} <h3> Click on the button and add the class</h3> <br> function getClass() { var e = document.getElementById(&apos;Btn&apos;); e.classList.add(&apos;myClass&apos;); } 

Wanneer de gebruiker in de code op de knop klikt, wordt de nieuwe klasse toegevoegd aan de bestaande klassen. De uitvoer na het klikken op de knop wordt hieronder weergegeven:

classList.remove()

De functie remove() wordt gebruikt om de bestaande klassen uit de elementen te verwijderen.

Het onderstaande voorbeeld laat zien hoe u een of meer klassen kunt verwijderen met de methode classlist.remove():

 .myClass {background: red;} <h3> Click on the button and remove the class </h3> <br> function getClass() { var e = document.getElementById(&apos;Btn&apos;); e.classList.remove(&apos;myClass&apos;); } 

In de bovenstaande code wordt, wanneer de gebruiker op de knop klikt, de specifieke gespecificeerde klasse verwijderd uit de bestaande CSS-klassen. De uitvoer na het klikken op de knop wordt hieronder weergegeven:

Klassenlijst.toggle()

De knop toggle() wordt gebruikt om klassen naar het element te schakelen. Het betekent het toevoegen van een nieuwe klasse of het verwijderen van de bestaande klassen.

Hieronder staat een voorbeeld dat ons laat begrijpen hoe we de methode toggle() kunnen gebruiken om klassen toe te voegen of te verwijderen.

latex tekstgrootte

Voorbeeld:

 .myClass1{background: red;} .myClass2 {background: blue;} <h3> Click on the button to add or remove the class</h3> <br> function get_toggle() { var e = document.getElementById(&apos;Btn&apos;); e.classList.toggle(&apos;myClass2&apos;); } 

Wanneer de gebruiker in de code op de knop klikt, wordt de klasse toegevoegd aan of verwijderd uit de CSS-klassen. De uitvoer na het klikken op de knop wordt hieronder weergegeven:

Klassenlijst.bevat()

De methode contain() wordt gebruikt om te controleren of de opgegeven klasse bestaat in de CSS-klassen en retourneert de Booleaanse waarde als waar of onwaar.

Hieronder ziet u een voorbeeld dat laat zien hoe u naar een klasse kunt zoeken, ongeacht of deze bestaat of niet, met behulp van de methode contain():

Voorbeeld:

 function getClass() { var e = document.getElementById(&apos;Btn&apos;); document.write(e.classList.contains(&apos;myClass&apos;)+&apos; <br>&apos;+&apos;myclass is the name of the class&apos;); } 

In de bovenstaande code is te zien dat wanneer de gebruiker op de knop klikt, er wordt gecontroleerd of de opgegeven klasse aanwezig is in de CSS-klassen. Als deze aanwezig is, wordt een Booleaanse waarde als true geretourneerd. Anders zal het false retourneren. De uitvoer van de bovenstaande code na het klikken op de knop wordt hieronder weergegeven:

klassenlijst.vervangen()

De methode Replace() wordt gebruikt om een ​​bestaande klasse te vervangen door een nieuwe. Het betekent niet dat de klasse uit de elementen wordt verwijderd, maar dat de eigenschappen van de bestaande klasse worden vervangen door de eigenschappen van de nieuwe klasse.

Hieronder ziet u een voorbeeld waarmee we zullen begrijpen hoe we een bestaande klasse kunnen vervangen door een nieuwe klasse:

Voorbeeld:

 .myClass1 {background: red;} .myClass2 {background: blue;} function replace_Class() { var e = document.getElementById('Btn'); e.classList.replace('myClass1', 'myClass2'); } 

Wanneer de gebruiker in de bovenstaande code op de knop klikt, worden de bestaande klasse-eigenschappen vervangen door de nieuwe klasse-eigenschappen. De uitvoer na het klikken op de knop wordt hieronder weergegeven:

classList.item()

De functie item() wordt gebruikt om de naam van de klasse terug te geven die aanwezig is bij de opgegeven indexwaarde.

min. max

Hieronder ziet u een voorbeeld dat ons laat begrijpen hoe we de item()-methode kunnen gebruiken om de waarde te retourneren:

Voorbeeld:

 <h3> Click on the button to get the specified index value</h3><br> function get_Class() { var e = document.getElementById(&apos;Btn&apos;); alert(e.classList.item(2)); } 

Wanneer de gebruiker in de code op de knop klikt, wordt de klasse weergegeven die aanwezig is in de opgegeven index. Nadat we op de knop hebben geklikt, krijgen we de opgegeven indexklassewaarde, zoals hieronder weergegeven:

Dit zijn enkele methoden van het classList DOM-object en alles over classList.