TechCodeview

JavaScript classList ir JavaScript DOM rekvizīts, kas ļauj veidot elementa CSS (Cascading Style Sheet) klases. JavaScript classList ir tikai lasāms rekvizīts, kas atgriež CSS klašu nosaukumus. Tas ir JavaScript īpašums attiecībā pret citiem JavaScript rekvizītiem, kas ietver stilu un klases nosaukumu. Rekvizīts style atgriež CSS klases elementa krāsu vai citu stilu, un className tiek izmantots, lai atgrieztu CSS failā izmantoto klašu nosaukumus. Tomēr rekvizīti className un classList atgriež to klašu nosaukumus, kuras esam izmantojuši CSS failā, taču dažādos veidos. Rekvizīts className atgriež klašu nosaukumus virknes veidā, savukārt rekvizīts classList JavaScript atgriež klašu nosaukumus masīva veidā.

Šeit mēs īsi apspriedīsim JavaScript classList un apspriedīsim arī tā metodes ar to praktisko ieviešanu.

JavaScript classList rekvizīta piemērs

Tālāk ir sniegts JavaScript classList rekvizīta piemērs, caur kuru mēs iegūsim elementa klases vērtību.

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

Iepriekš minētā koda izvade ir parādīta zemāk:

JavaScript klases saraksta īpašums

Rekvizīts classList tiek izmantots, lai attēlotu klases elementu vērtību, kas ir a DOMTokenList objektu. Tas ir tikai lasāms īpašums, taču mēs varam mainīt tā vērtību, manipulējot ar programmā izmantotajām klasēm. JavaScript classList rekvizīts sastāv no šādām metodēm, ar kuru palīdzību mēs varam veikt dažādas darbības ar klases elementiem:

css treknrakstā

pievienot ():Metode add() tiek izmantota, lai elementam pievienotu vienu vai vairākas klases.noņemt ():Metode remove() tiek izmantota, lai noņemtu vienu vai vairākas klases no elementā esošo klašu skaita.pārslēgt ():Metode toggle() tiek izmantota, lai pārslēgtu elementa norādītos klašu nosaukumus. Tas nozīmē, ka ar vienu klikšķi tiek pievienota norādītā klase, bet ar otru klikšķi klase tiek noņemta. To sauc par elementa pārslēgšanas īpašību.aizvietot():Aizvietošanas () metode tiek izmantota, lai aizstātu esošo klasi ar jaunu klasi.satur ():Rekvizīta JavaScript classList metode satur() tiek izmantota Būla vērtības atgriešanai kā izvadi. Ja klase ir klāt, vērtība tiek atgriezta kā patiesa, pretējā gadījumā tiek atgriezta vērtība false.lieta():Metode item() tiek izmantota, lai parādītu klašu nosaukumus konkrētajā indeksā. Tādējādi tas atgriež klases nosaukumu.

Šīs ir dažas no metodēm, kas tiek izmantotas JavaScript klases sarakstā.

Mēs apspriedīsimies pa vienam.

java saraksts tukšs

classList.add()

Funkcija, ko izmanto vienas vai vairāku klašu pievienošanai CSS elementam.

Piemērs:

Tālāk ir parādīts piemērs, kā pievienot klasi, izmantojot metodi 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;); } 

Kodā, kad lietotājs noklikšķina uz pogas, jaunā klase tiek pievienota esošajām klasēm. Izvade pēc noklikšķināšanas uz pogas ir parādīta zemāk:

classList.remove()

Funkcija remove() tiek izmantota esošo klašu noņemšanai no elementiem.

Tālāk ir parādīts piemērs, kā noņemt vienu vai vairākas klases, izmantojot metodi 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;); } 

Iepriekš minētajā kodā, lietotājam noklikšķinot uz pogas, konkrētā norādītā klase tiek noņemta no esošajām CSS klasēm. Izvade pēc noklikšķināšanas uz pogas ir parādīta zemāk:

Classlist.toggle()

Poga toggle() tiek izmantota, lai pārslēgtu klases uz elementu. Tas nozīmē jaunas klases pievienošanu vai esošo klašu noņemšanu.

Tālāk ir sniegts piemērs, kas liks mums saprast, kā izmantot toggle() metodi, lai pievienotu vai noņemtu klases.

Piemērs:

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

Kodā, kad lietotājs noklikšķina uz pogas, klase tiks pievienota vai noņemta no CSS klasēm. Izvade pēc noklikšķināšanas uz pogas ir parādīta zemāk:

kā izslēgt izstrādātāja režīmu Android

Classlist.contains()

Metode include() tiek izmantota, lai pārbaudītu, vai norādītā klase pastāv CSS klasēs, un attiecībā uz to tā atgriež Būla vērtību kā patiesa vai nepatiesa.

Tālāk ir sniegts piemērs, kas parāda, kā meklēt klasi, ja tā pastāv vai neizmanto, izmantojot Content() metodi:

Piemērs:

modifikācijas taustiņi

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

Iepriekš minētajā kodā ir redzams, ka, kad lietotājs noklikšķina uz pogas, tas pārbauda norādīto klasi, ja tā atrodas CSS klasēs. Ja tā ir, tiks atgriezta Būla vērtība kā patiesa. Pretējā gadījumā tas atgriezīsies nepatiesi. Iepriekš minētā koda izvade pēc noklikšķināšanas uz pogas ir parādīta zemāk:

classlist.replace()

Aizvietošanas () metode tiek izmantota, lai aizstātu esošo klasi ar jaunu. Tas nenozīmē, ka klase tiek noņemta no elementiem, bet esošās klases īpašības tiek aizstātas ar jaunās klases īpašībām.

Zemāk ir piemērs, ar kuru mēs sapratīsim, kā mēs varam aizstāt esošo klasi ar jaunu klasi:

Piemērs:

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

Iepriekš minētajā kodā, kad lietotājs noklikšķina uz pogas, esošie klases rekvizīti tiek aizstāti ar jaunajiem klases rekvizītiem. Izvade pēc noklikšķināšanas uz pogas ir parādīta zemāk:

classList.item()

Funkciju item() izmanto, lai atgrieztu tās klases nosaukumu, kas atrodas norādītajā indeksa vērtībā.

salīdzināt ar java

Tālāk ir sniegts piemērs, kas liks mums saprast, kā izmantot item() metodi, lai atgrieztu vērtību:

Piemērs:

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

Kodā, lietotājam noklikšķinot uz pogas, tiks parādīta norādītajā rādītājā esošā klase. Pēc noklikšķināšanas uz pogas mēs iegūstam norādīto indeksa klases vērtību, kā parādīts zemāk:

Šīs ir dažas no classList DOM objekta metodēm un viss par classList.