În această lecție vom examina proprietatea classList. care este proiectat să lucreze cu clasele elementului (nodului). Cu ajutorul lui puteți obține nu numai valoarea atributului de clasă al unui element, ci și să adăugați noi clase la el sau să le ștergeți pe cele existente.
Lucrul cu clasa (ele) elementului
Lucrul cu clasele element (nod) folosind metodele getAttribute (). setAttribute () și removeAttribute () sunt dificile când, de exemplu, trebuie să adăugați, să comutați sau să ștergeți o anumită clasă din element. Aceste metode vă permit să lucrați cu valoarea atributului de clasă numai în întregime și nu vă permite să gestionați clasele sale individuale.
Pentru a gestiona clasele individuale ale unui element, trebuie să utilizați proprietatea classList. Această proprietate reprezintă valoarea atributului de clasă ca obiect DOMTokenList. Proprietatea classList în sine este doar pentru citire, iar clasele (clasele) elementului sunt gestionate folosind metodele obiectului DOMTokenList.
Proprietatea classList (obiectul DOMTokenList) nu este acceptată în Internet Explorer 8, 9 și Opera Mini.
Proprietatea lungime
Obiectul DOMTokenList are proprietatea lungime. care returnează numărul de clase din listă. Această proprietate este numai pentru citire.
Metodele obiectului DOMTokenList
add (class1, class2.) - adaugă unul sau mai multe elemente de clasă. Dacă clasa specificată există deja în element, nu va fi adăugată.
conține (clasa) - returnează adevărat sau fals în funcție de faptul dacă elementul are clasa specificată.
element (index) - returnează numele clasei după indexul său din colecția DOMTokenList. Numărătoarea elementelor (claselor) din colecție începe la 0. Dacă ați specificat un index al unei clase inexistente (adică indicele este în afara intervalului) ca parametru al metodei item (), atunci această metodă returnează rezultatul nul.
remove (classl, class2.) - elimină una sau mai multe clase specificate de element. Dacă specificați o clasă care nu există pentru un element, aceasta nu va duce la o eroare în funcționarea metodei.
comutare (clasă, adevărată | false) - comută numele de clasă specificat al elementului. Metoda de comutare are 2 parametri: clasa (obligatorie) - specifică numele clasei de comutare; true | false (opțional) - O valoare booleană care forțează clasa să activeze sau să dezactiveze clasa specificată pentru element.
Când utilizați metoda toogle cu un singur parametru, comută clasa. Ie dacă clasa dată are un element, atunci ea o șterge și dacă această clasă nu are un element, atunci ea o adaugă.
Când utilizați metoda toogle cu 2 parametri, comută clasa în funcție de valoarea parametrului 2. Dacă 2 este setat la true. atunci această metodă adaugă o clasă elementului. Și dacă 2 parametru este fals. atunci această metodă elimină clasa specificată din element.
Când utilizați metoda toogle, trebuie să rețineți că al doilea parametru nu este acceptat în Internet Explorer 10 și 11.
De exemplu, comutați clasa hidden-xs la un element care are id = "sidebar":
De exemplu, adăugați mai multe clase la un element cu id = "myID":
De exemplu, eliminați clasa ascunsă-xs dintr-un element cu id = "myID":
De exemplu, obțineți numele primei clase a unui element cu id = "myID":
De exemplu, pentru a determina dacă un element are o clasă ascunsă-lg și dacă are, șterge-l: