TechCodeview

JavaScript classList er en DOM-egenskap for JavaScript som gjør det mulig å style CSS-klassene (Cascading Style Sheet) til et element. JavaScript classList er en skrivebeskyttet egenskap som returnerer navnene på CSS-klassene. Det er en egenskap til JavaScript med hensyn til de andre egenskapene til JavaScript som inkluderer stil og klassenavn. Style-egenskapen returnerer fargen eller annen stil til CSS-klasseelementet, og className brukes for å returnere navnene på klassene som brukes i CSS-filen. Egenskapene className og classList returnerer imidlertid navnet på klassene som vi har brukt i CSS-filen, men på forskjellige måter. className-egenskapen returnerer navnet på klassene i form av en streng, mens classList-egenskapen til JavaScript returnerer navnet på klassene i form av en matrise.

Her vil vi ta en kort diskusjon om JavaScript classList og også diskutere metodene med deres praktiske implementeringer.

Eksempel på JavaScript classList-egenskap

Nedenfor er et eksempel på JavaScript classList-egenskapen som vi får klasseverdien til et element gjennom.

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

Utgangen av koden ovenfor er vist nedenfor:

JavaScript classList Property

classList-egenskapen brukes til å representere verdien av klasseelementene som er en DOMTokenList gjenstand. Det er en skrivebeskyttet egenskap, men vi kan endre verdien ved å manipulere klassene som brukes i programmet. JavaScript classList-egenskapen består av følgende metoder der vi kan utføre forskjellige operasjoner på klasseelementene:

Legg til():Add()-metoden brukes for å legge til en eller flere klasser til elementet.fjerne():Remove()-metoden brukes for å fjerne en eller flere klasser fra antallet klasser som er tilstede i elementet.veksle():Toggle()-metoden brukes til å veksle mellom de angitte klassenavnene til et element. Det betyr at ved ett klikk blir den angitte klassen lagt til, og ved et annet klikk blir klassen fjernet. Det er kjent som toggle-egenskapen til et element.erstatte():Replace()-metoden brukes til å erstatte en eksisterende klasse med en ny klasse.inneholder():Metoden contains() til JavaScript classList-egenskapen brukes for å returnere den boolske verdien som en utdata. Hvis klassen er tilstede, returneres verdien som true, ellers returneres false.punkt():Item()-metoden brukes for å vise navnet på klassene ved den bestemte indeksen. Dermed returnerer den klassenavnet.

Dette er noen av metodene som brukes i JavaScript-klasselisten.

Vi vil diskutere en etter en.

java streng til int konvertering

classList.add()

Funksjonen som brukes for å legge til en eller flere klasser til CSS-elementet.

Eksempel:

Eksempelet nedenfor viser hvordan du legger til en klasse ved å bruke 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 brukeren klikker på knappen, blir den nye klassen lagt til med de eksisterende klassene. Utgangen etter å ha klikket på knappen vises nedenfor:

classList.remove()

Remove()-funksjonen brukes til å fjerne de eksisterende klassene fra elementene.

Eksempelet nedenfor viser hvordan du fjerner en eller flere klasser ved å bruke 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 koden ovenfor, når brukeren klikker på knappen, blir den spesifiserte klassen fjernet fra de eksisterende CSS-klassene. Utgangen etter å ha klikket på knappen vises nedenfor:

Classlist.toggle()

Toggle()-knappen brukes for å veksle klasser til elementet. Det betyr å legge til en ny klasse eller fjerne de eksisterende klassene.

Nedenfor er et eksempel som vil få oss til å forstå hvordan vi kan bruke toggle()-metoden for å legge til eller fjerne klasser.

autocad stretch-kommando

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 brukeren klikker på knappen, vil klassen bli lagt til eller fjernet fra CSS-klassene. Utgangen etter å ha klikket på knappen vises nedenfor:

Classlist.contains()

Metoden contains() brukes til å sjekke om den spesifiserte klassen eksisterer i CSS-klassene, og med hensyn til den returnerer den den boolske verdien som sann eller usann.

Nedenfor er et eksempel som viser hvordan du søker etter en klasse hvis den eksisterer eller ikke ved å bruke 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 koden ovenfor ser man at når brukeren klikker på knappen, så sjekker den for den spesifiserte klassen hvis den er til stede i CSS-klassene. Hvis den er tilstede, vil en boolsk verdi som sann returneres. Ellers vil den returnere falsk. Utgangen av koden ovenfor etter å ha klikket på knappen er vist nedenfor:

classlist.replace()

Replace()-metoden brukes for å erstatte en eksisterende klasse med en ny. Det betyr ikke at klassen fjernes fra elementene, men egenskapene til den eksisterende klassen erstattes med egenskapene til den nye klassen.

Nedenfor er et eksempel der 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 koden ovenfor, når brukeren klikker på knappen, blir de eksisterende klasseegenskapene erstattet med de nye klasseegenskapene. Utgangen etter å ha klikket på knappen vises nedenfor:

classList.item()

Item()-funksjonen brukes til å returnere navnet på klassen som er til stede ved den angitte indeksverdien.

Nedenfor er et eksempel som vil få oss til å forstå hvordan vi bruker metoden item() for å returnere verdien:

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 brukeren klikker på knappen, vil klassen som er tilstede på den angitte indeksen vises. Etter å ha klikket på knappen får vi den angitte indeksklasseverdien, som vist nedenfor:

Dette er noen av metodene til classList DOM-objektet og alt om classList.