Schimbarea unei clase de elemente folosind javascript - html - dom, cod q

Metode moderne HTML5 pentru schimbarea clasei

Browserele moderne au adăugat un ClassList care oferă metode care simplifică gestionarea claselor fără a necesita o bibliotecă:

Din păcate, acestea nu funcționează în Internet Explorer până la versiunea 10, deși există suport pentru a adăuga suport pentru IE8 și IE9 disponibile pe această pagină. Cu toate acestea, acest lucru este din ce în ce mai susținut.

Soluție simplă de browser încrucișată

Pentru a schimba toate clasele pentru un element:

Pentru a înlocui toate clasele existente cu una sau mai multe clase noi, setați atributul className:

(Puteți utiliza o listă separată de spațiu pentru a aplica mai multe clase.)

Pentru a adăuga o clasă suplimentară unui element:

Pentru a adăuga o clasă unui element fără a șterge / a nu afecta valorile existente, adăugați un spațiu și un nume de clasă nou, de exemplu:

Pentru a elimina o clasă din articol:

Pentru a elimina o clasă într-un element fără a afecta alte clase potențiale, pur și simplu trebuie să înlocuiți expresia regulată:

Explicația acestei expresii regulate este următoarea:

Flagul g raportează că înlocuirea se repetă după cum este necesar, dacă numele clasei a fost adăugat de mai multe ori.

Pentru a verifica dacă clasa este deja aplicată unui element:

Aceeași expresie regulată folosită mai sus pentru a șterge o clasă poate fi, de asemenea, utilizată pentru a verifica dacă există o anumită clasă:

Alocarea acestor acțiuni pentru evenimentele onclick:

Primul pas pentru a realiza acest lucru este crearea unei funcții și apelarea unei funcții în atributul onclick, de exemplu:

(Foarte aproape, biblioteca este un set de instrumente concepute pentru o anumită sarcină, în timp ce structura conține de obicei mai multe biblioteci și îndeplinește un set complet de îndatoriri.)

(Rețineți că $ aici este un obiect jQuery.)