TechCodeview

JavaScript classList er en DOM-egenskab for JavaScript, der gør det muligt at style CSS-klasserne (Cascading Style Sheet) for et element. JavaScript classList er en skrivebeskyttet egenskab, der returnerer navnene på CSS-klasserne. Det er en egenskab ved JavaScript i forhold til JavaScripts andre egenskaber, der inkluderer stil og klassenavn. Style-egenskaben returnerer farven eller anden stil af CSS-klasseelementet, og className bruges til at returnere navnene på de klasser, der bruges i CSS-filen. Egenskaberne className og classList returnerer dog navnet på de klasser, som vi har brugt i CSS-filen, men på forskellige måder. className-egenskaben returnerer navnet på klasserne i form af en streng, mens classList-egenskaben for JavaScript returnerer navnet på klasserne i form af en matrix.

Her vil vi tage en kort diskussion om JavaScript classList og også diskutere dens metoder med deres praktiske implementeringer.

Eksempel på JavaScript classList-egenskab

Nedenfor er et eksempel på JavaScript classList-egenskab, hvorigennem vi får klasseværdien af ​​et element.

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

Outputtet af ovenstående kode er vist nedenfor:

JavaScript classList Property

ClassList-egenskaben bruges til at repræsentere værdien af ​​klasseelementerne, som er en DOMTokenList objekt. Det er en skrivebeskyttet egenskab, men vi kan ændre dens værdi ved at manipulere de klasser, der bruges i programmet. JavaScript classList-egenskaben består af følgende metoder, hvorigennem vi kan udføre forskellige operationer på klasseelementerne:

tilføje():Add() metoden bruges til at tilføje en eller flere klasser til elementet.fjerne():Metoden remove() bruges til at fjerne en eller flere klasser fra antallet af klasser, der er til stede i elementet.skifte():Toggle()-metoden bruges til at skifte mellem de angivne klassenavne på et element. Det betyder, at ved et klik bliver den angivne klasse tilføjet, og ved et andet klik bliver klassen fjernet. Det er kendt som toggle-egenskaben for et element.erstatte():metoden replace() bruges til at erstatte en eksisterende klasse med en ny klasse.indeholder():Metoden contains() for egenskaben JavaScript classList bruges til at returnere den boolske værdi som et output. Hvis klassen er til stede, returneres værdien som sand, ellers returneres falsk.vare():Item()-metoden bruges til at vise navnet på klasserne ved det bestemte indeks. Således returnerer den klassenavnet.

Dette er nogle af de metoder, der bruges i JavaScript-klasselisten.

Vi vil diskutere en efter en.

java streng til int konvertering

classList.add()

Funktionen som bruges til at tilføje en eller flere klasser til CSS-elementet.

Eksempel:

Nedenstående eksempel viser, hvordan man tilføjer en klasse ved hjælp af classList.add() metoden:

 .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;); } 

I koden, når brugeren klikker på knappen, bliver den nye klasse tilføjet med de eksisterende klasser. Outputtet efter klik på knappen er vist nedenfor:

classList.remove()

Remove()-funktionen bruges til at fjerne de eksisterende klasser fra elementerne.

Nedenstående eksempel viser, hvordan man fjerner en eller flere klasser ved hjælp af classlist.remove() metoden:

 .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;); } 

I ovenstående kode, når brugeren klikker på knappen, bliver den specifikke angivne klasse fjernet fra de eksisterende CSS-klasser. Outputtet efter klik på knappen er vist nedenfor:

Classlist.toggle()

Toggle()-knappen bruges til at skifte klasser til elementet. Det betyder at tilføje en ny klasse eller fjerne de eksisterende klasser.

Nedenfor er et eksempel, der vil få os til at forstå, hvordan man gør brug af toggle()-metoden til at tilføje eller fjerne klasser.

jsp javatpoint

Eksempel:

 .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;); } 

I koden, når brugeren klikker på knappen, vil klassen blive tilføjet eller fjernet fra CSS-klasserne. Outputtet efter klik på knappen er vist nedenfor:

Classlist.contains()

Metoden contains() bruges til at kontrollere, om den angivne klasse findes i CSS-klasserne, og med hensyn til den returnerer den den boolske værdi som sand eller falsk.

Nedenfor er et eksempel, der viser, hvordan man søger efter en klasse, hvis den eksisterer eller ikke ved hjælp af contains()-metoden:

Eksempel:

 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;); } 

I ovenstående kode ses det, at når brugeren klikker på knappen, så tjekker den for den angivne klasse, hvis den er til stede i CSS-klasserne. Hvis den er til stede, returneres en boolsk værdi som sand. Ellers vil det returnere falsk. Outputtet af ovenstående kode efter klik på knappen er vist nedenfor:

classlist.replace()

metoden replace() bruges til at erstatte en eksisterende klasse med en ny. Det betyder ikke, at klassen fjernes fra elementerne, men egenskaberne for den eksisterende klasse bliver erstattet med egenskaberne for den nye klasse.

Nedenfor er et eksempel, hvorigennem vi vil forstå, hvordan vi kan erstatte en eksisterende klasse med en ny klasse:

Eksempel:

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

I ovenstående kode, når brugeren klikker på knappen, bliver de eksisterende klasseegenskaber erstattet med de nye klasseegenskaber. Outputtet efter klik på knappen er vist nedenfor:

classList.item()

Funktionen item() bruges til at returnere navnet på klassen, som er til stede ved den angivne indeksværdi.

Nedenfor er et eksempel, der vil få os til at forstå, hvordan man bruger metoden item() til at returnere værdien:

Eksempel:

 <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)); } 

I koden, når brugeren klikker på knappen, vil den klasse, der er til stede på det angivne indeks, blive vist. Efter at have klikket på knappen får vi den angivne indeksklasseværdi, som vist nedenfor:

Dette er nogle af metoderne til classList DOM-objektet og alt om classList.