Cauta rapid aici ↑

classList API

JavaScript contine o multime de API-uri si in prezent putem spune ca avem cate un API pentru orice. classList API reprezinta modalitatea prin care putem adauga, inlatura, alterna clase CSS pe elementele noastre html. Putem face mai mult de atat, chiar sa aflam daca un element HTML contine o anumita clasa CSS si daca acel element contine respectiva clasa CSS, atunci putem face ceva anume, putem sa o inlaturam, sa o alternam sau chiar sa adaugam multe alte clase CSS, practic putem face ce vrem.

Acest lucru se putea face si in trecut, insa pentru a putea realiza acest lucru trebuia sa scriem mai mult cod. Sigur ne puteam folosi de metodele setAttribute(), getAttribute() si removeAttribute() pentru a realiza task-urile noastre.

Urmatoarea lista va prezinta metode si proprietatii ale obiectului classList si ce fac acestea, dar si alte metode si proprietati pe care le putem folosi in siguranta pe acest obiect.

  • add() → Adauga una sau mai multe clase CSS iar fiecare trebuie sa stea intre ghilimele. Daca sunt mai mult de una, atunci acestea trebuiesc separate de virgula.
  • remove() → Identic cu metoda add(), cu specificatia ca aceasta metoda inlatura una sau mai multe clase CSS.
  • toggle() → Alterneaza una sau mai multe clase CSS pe elementul HTML.
  • contains() → Verifica daca un element HTML contine o anumita clasa CSS.
  • item() → Returneaza numele clasei aflate la o anumita pozitie. Valorile sunt exclusiv numeric. Numaratoarea incepe de la cifra zero.
  • toString() → Returneaza sub forma unui string denumirile claselor prezente in acel moment.
  • length → Returneaza numeric cate clase CSS sunt prezente in acel moment.

Mai jos vedeti codul unde am folosit aceste metode si proprietatii dar si exemplul live.