JavaScript classList este o proprietate DOM a JavaScript care permite stilarea claselor CSS (Cascading Style Sheet) ale unui element. JavaScript classList este o proprietate numai pentru citire care returnează numele claselor CSS. Este o proprietate a JavaScript în raport cu celelalte proprietăți ale JavaScript care includ stil și className. Proprietatea style returnează culoarea sau alt stil al elementului de clasă CSS, iar className este folosit pentru a returna numele claselor utilizate în fișierul CSS. Cu toate acestea, proprietățile className și classList returnează numele claselor pe care le-am folosit în fișierul CSS, dar în moduri diferite. Proprietatea className returnează numele claselor sub forma unui șir, în timp ce proprietatea classList a JavaScript returnează numele claselor sub forma unui tablou.

Aici, vom lua o scurtă discuție despre JavaScript classList și, de asemenea, vom discuta despre metodele acesteia cu implementările lor practice.

Exemplu de proprietate JavaScript classList

Mai jos este un exemplu de proprietate JavaScript classList prin care vom obține valoarea clasei unui 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); } 

Rezultatul codului de mai sus este prezentat mai jos:

Proprietate JavaScript classList

Proprietatea classList este folosită pentru reprezentarea valorii elementelor clasei care este a DOMTokenList obiect. Este o proprietate numai în citire, dar îi putem modifica valoarea prin manipularea claselor utilizate în program. Proprietatea JavaScript classList constă în următoarele metode prin care putem efectua diferite operații asupra elementelor clasei:

adăuga():Metoda add() este folosită pentru a adăuga una sau mai multe clase la element.elimina():Metoda remove() este folosită pentru a elimina una sau mai multe clase din numărul de clase prezente în element.comutare():Metoda toggle() este folosită pentru comutarea numelor de clasă specificate ale unui element. Înseamnă că la un clic clasa specificată este adăugată și la un alt clic clasa este eliminată. Este cunoscută ca proprietatea de comutare a unui element.a inlocui():Metoda replace() este folosită pentru a înlocui o clasă existentă cu o nouă clasă.conţine():Metoda contains() a proprietății JavaScript classList este utilizată pentru a returna valoarea booleană ca rezultat. Dacă clasa este prezentă, valoarea este returnată ca adevărată, altfel este returnată false.articol():Metoda item() este folosită pentru afișarea numelui claselor la indexul particular. Astfel, returnează numele clasei.

Acestea sunt câteva dintre metodele care sunt utilizate în JavaScript classList.

Vom discuta unul câte unul.

classList.add()

Funcția care este utilizată pentru adăugarea uneia sau mai multor clase la elementul CSS.

Exemplu:

Exemplul de mai jos arată cum să adăugați o clasă folosind metoda 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;); } 

În cod, atunci când utilizatorul face clic pe buton, noua clasă este adăugată cu clasele existente. Rezultatul după ce faceți clic pe butonul este afișat mai jos:

classList.remove()

Funcția remove() este folosită pentru a elimina clasele existente din elemente.

Exemplul de mai jos arată cum să eliminați una sau mai multe clase folosind metoda 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;); } 

În codul de mai sus, când utilizatorul face clic pe buton, clasa specificată este eliminată din clasele CSS existente. Rezultatul după ce faceți clic pe butonul este afișat mai jos:

Classlist.toggle()

Butonul toggle() este folosit pentru comutarea claselor la element. Înseamnă adăugarea unei noi clase sau eliminarea claselor existente.

Mai jos este un exemplu care ne va face să înțelegem cum să folosim metoda toggle() pentru a adăuga sau elimina clase.

Exemplu:

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

În cod, atunci când utilizatorul face clic pe buton, clasa va fi adăugată sau eliminată din clasele CSS. Rezultatul după ce faceți clic pe butonul este afișat mai jos:

modele de programare java

Classlist.contains()

Metoda contains() este folosită pentru a verifica dacă clasa specificată există în clasele CSS și în raport cu aceasta, returnează valoarea booleană ca adevărată sau falsă.

Mai jos este un exemplu care arată cum să căutați o clasă dacă există sau nu folosind metoda contains():

Exemplu:

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

În codul de mai sus, se vede că atunci când utilizatorul dă clic pe buton, atunci verifică clasa specificată dacă este prezentă în clasele CSS. Dacă este prezentă, va fi returnată o valoare booleană ca adevărată. În caz contrar, va reveni fals. Ieșirea codului de mai sus după ce faceți clic pe butonul este afișată mai jos:

classlist.replace()

Metoda replace() este folosită pentru a înlocui o clasă existentă cu una nouă. Nu înseamnă că clasa este eliminată din elemente, dar proprietățile clasei existente sunt înlocuite cu proprietățile clasei noi.

Mai jos este un exemplu prin care vom înțelege cum putem înlocui o clasă existentă cu o clasă nouă:

Exemplu:

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

În codul de mai sus, când utilizatorul face clic pe buton, proprietățile existente ale clasei sunt înlocuite cu noile proprietăți ale clasei. Rezultatul după ce faceți clic pe butonul este afișat mai jos:

classList.item()

Funcția item() este utilizată pentru a returna numele clasei care este prezentă la valoarea indexului specificată.

Mai jos este un exemplu care ne va face să înțelegem cum să folosim metoda item() pentru a returna valoarea:

Exemplu:

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

În cod, când utilizatorul face clic pe buton, clasa prezentă pe indexul specificat va fi afișată. După ce facem clic pe butonul, obținem valoarea specificată a clasei de index, așa cum se arată mai jos:

Acestea sunt câteva dintre metodele obiectului classList DOM și totul despre classList.