TechCodeview

JavaScript classList je DOM svojstvo JavaScripta koje omogućuje stiliziranje CSS (Cascading Style Sheet) klasa elementa. JavaScript classList svojstvo je samo za čitanje koje vraća nazive CSS klasa. To je svojstvo JavaScripta u odnosu na druga svojstva JavaScripta koje uključuje style i className. Svojstvo style vraća boju ili drugi stil elementa CSS klase, a className se koristi za vraćanje imena klasa korištenih u CSS datoteci. Međutim, svojstva className i classList vraćaju nazive klasa koje smo koristili u CSS datoteci, ali na različite načine. Svojstvo className vraća naziv klase u obliku niza, dok svojstvo classList od JavaScript vraća naziv klase u obliku niza.

Ovdje ćemo uzeti kratku raspravu o JavaScript classList i također raspravljati o njegovim metodama s njihovim praktičnim implementacijama.

Primjer svojstva JavaScript classList

Ispod je primjer JavaScript classList svojstva preko kojeg ćemo dobiti vrijednost klase elementa.

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

Ishod gornjeg koda prikazan je u nastavku:

Svojstvo JavaScript classList

Svojstvo classList koristi se za predstavljanje vrijednosti elemenata klase koja je a DOMTokenList objekt. To je svojstvo samo za čitanje, ali možemo promijeniti njegovu vrijednost manipulirajući klasama koje se koriste u programu. Svojstvo JavaScript classList sastoji se od sljedećih metoda pomoću kojih možemo izvoditi različite operacije na elementima klase:

usporedivo sučelje u Javi

dodati():Metoda add() koristi se za dodavanje jedne ili više klasa elementu.ukloniti():Metoda remove() koristi se za uklanjanje jedne ili više klasa iz broja klasa prisutnih u elementu.prebaci():Metoda toggle() koristi se za promjenu navedenih naziva klasa elementa. To znači da se jednim klikom navedena klasa dodaje, a drugim klikom klasa se uklanja. Poznato je kao svojstvo preklopnika elementa.zamijeniti():Metoda replace() koristi se za zamjenu postojeće klase novom klasom.sadrži():Metoda contains() svojstva JavaScript classList koristi se za vraćanje Booleove vrijednosti kao izlaza. Ako je klasa prisutna, vrijednost se vraća kao true, inače se vraća false.artikal():Metoda item() koristi se za prikaz naziva klasa u određenom indeksu. Dakle, vraća naziv klase.

Ovo su neke od metoda koje se koriste u JavaScript classList.

Razgovarat ćemo o jednom po jednom.

niz datuma java

classList.add()

Funkcija koja se koristi za dodavanje jedne ili više klasa CSS elementu.

Primjer:

Donji primjer pokazuje kako dodati klasu pomoću metode 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;); } 

U kodu, kada korisnik klikne na gumb, nova klasa se dodaje s postojećim klasama. Rezultat nakon klika na gumb prikazan je u nastavku:

classList.remove()

Funkcija remove() koristi se za uklanjanje postojećih klasa iz elemenata.

Donji primjer pokazuje kako ukloniti jednu ili više klasa pomoću metode 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;); } 

U gornjem kodu, kada korisnik klikne na gumb, određena navedena klasa uklanja se iz postojećih CSS klasa. Rezultat nakon klika na gumb prikazan je u nastavku:

Classlist.toggle()

Gumb toggle() koristi se za prebacivanje klasa na element. To znači dodavanje nove klase ili uklanjanje postojećih klasa.

Ispod je primjer koji će nam pomoći da shvatimo kako koristiti metodu toggle() za dodavanje ili uklanjanje klasa.

Primjer:

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

U kodu, kada korisnik klikne na gumb, klasa će se dodati ili ukloniti iz CSS klasa. Rezultat nakon klika na gumb prikazan je u nastavku:

što je rukovanje iznimkama u Javi

Classlist.contains()

Metoda contains() koristi se za provjeru postoji li navedena klasa u CSS klasama i u odnosu na nju vraća Booleovu vrijednost kao true ili false.

Ispod je primjer koji pokazuje kako pretraživati ​​klasu ako postoji ili ne pomoću metode contains():

Primjer:

cast int u string java

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

U gornjem kodu se vidi da kada korisnik klikne na gumb, on provjerava da li postoji određena klasa u CSS klasama. Ako je prisutan, bit će vraćena Booleova vrijednost kao true. Inače će se vratiti false. Ishod gornjeg koda nakon klika na gumb prikazan je u nastavku:

classlist.replace()

Metoda replace() koristi se za zamjenu postojeće klase novom. To ne znači da se klasa uklanja iz elemenata, već se svojstva postojeće klase zamjenjuju svojstvima nove klase.

Ispod je primjer kroz koji ćemo razumjeti kako možemo zamijeniti postojeću klasu novom klasom:

Primjer:

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

U gornjem kodu, kada korisnik klikne na gumb, postojeća svojstva klase zamjenjuju se novim svojstvima klase. Rezultat nakon klika na gumb prikazan je u nastavku:

classList.item()

Funkcija item() koristi se za vraćanje imena klase koja je prisutna na navedenoj vrijednosti indeksa.

prosti broj u Javi

Ispod je primjer koji će nam pomoći da shvatimo kako koristiti metodu item() za vraćanje vrijednosti:

Primjer:

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

U kodu, kada korisnik klikne na gumb, prikazat će se klasa prisutna u navedenom indeksu. Nakon klika na gumb, dobivamo navedenu vrijednost klase indeksa, kao što je prikazano u nastavku:

Ovo su neke od metoda classList DOM objekta i sve o classList.