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.)
Schimbarea claselor cu jQuery:
În plus, jQuery oferă o comandă rapidă pentru adăugarea unei clase, în cazul în care nu se aplică, sau eliminarea unei clase care face:
Alocarea unei funcții unui eveniment clic cu jQuery:
Sau, fără a solicita un identificator:
Articole similare
Trimiteți-le prietenilor: