de Ayo Isaiah

Cum se manipulează clasele fără jQuery utilizând API-ul classList al HTML5

Cum se manipuleaza clasele fara jQuery utilizand API ul classList al

Ca dezvoltator front-end, trebuie adesea să modificați regulile CSS pe baza modului în care un utilizator interacționează cu elementele de pe o pagină.

În trecut, m-am bazat pe jQuery pentru a gestiona aceste tipuri de manipulări DOM pentru mine. Dar, în unele cazuri, nu are sens să importați întreaga bibliotecă jQuery, doar pentru a putea efectua unele manipulări de bază ale DOM.

Din fericire, HTML5 oferă o modalitate de a face acest lucru în mod nativ, fără a fi nevoie de jQuery.

Cum am descoperit metoda classList a HTML5

Acum câteva zile, citeam un cod. Am observat că un proiect a inclus jQuery ca dependență, doar pentru a putea adăuga și elimina clase atunci când utilizatorul a făcut clic pe un buton de pe pagină. Întregul cod de interacțiune era doar 11 linii de cod.

Mi s-a părut ciudat că o fac așa. A fost echivalentul folosirii unui bazooka (jQuery) pentru a ucide un țânțar (adăugând și eliminând clase la un clic).

1612030325 83 Cum se manipuleaza clasele fara jQuery utilizand API ul classList al
Codul în cauză

Mi-a trecut prin minte că probabil făcusem lucruri similare în proiectele mele de codificare anterioare. Așa că am decis să încerc să reproduc aceeași funcționalitate folosind JavaScript simplu și să văd ce pot învăța din asta.

O căutare rapidă a arătat mai multe opțiuni pentru a face acest lucru în JavaScript simplu. Am mers cu classList metodă, deoarece este ușor de înțeles, iar suportul cross-browser este destul de bun.

1612030326 169 Cum se manipuleaza clasele fara jQuery utilizand API ul classList al
Conform Pot folosi, classList funcționează peste tot, cu excepția Opera Mini și Internet Explorer 8.

Rețineți că, dacă trebuie să acceptați versiuni de Internet Explorer mai vechi de IE 11, poate fi necesar să găsiți o metodă alternativă sau să utilizați un polifund.

Dacă depindeți în totalitate de utilizarea jQuery pentru gestionarea DOM, acesta este un loc minunat pentru a începe să obțineți o oarecare independență față de jQuery.

Ce este API-ul classList?

API-ul HTML5 classList oferă o modalitate de a prelua toate clasele asociate cu un element, astfel încât să puteți utiliza JavaScript pentru a le modifica.

Utilizarea proprietății classList DOM pe un element va returna un DOMTokenList. Acesta conține toate clasele aplicate unui element și lungime proprietate, care semnifică numărul total de clase pe acel element.

Aruncați o privire la acest exemplu:

<!-- html --><section class="content-wrapper about animated" id="about"></section>
//JavaScriptvar about = document.getElementById("about"); console.log(about.classList); //logs { 0: "content-wrapper" 1: "about" 2: "animated" length: 3 value: "content-wrapper about animated" }

Puteți încerca cele de mai sus în browserul dvs. pentru a le vedea în acțiune.

1612030326 942 Cum se manipuleaza clasele fara jQuery utilizand API ul classList al

Obținerea claselor unui element este foarte bună, dar nu este atât de utilă singură. Avem nevoie de o modalitate de a gestiona și actualiza aceste clase. Proprietatea classList oferă câteva metode care fac exact asta:

  • adăuga(): Adaugă clase specificate
  • elimina(): Elimină clasele specificate
  • contine (): Verifică dacă clasa specificată există pe element
  • comutare(): comută clasa specificată
  • index(): returnează clasa într-o poziție specificată din listă
  • lungime: returnează numărul de clase

Să aruncăm o privire la fiecare pe rând.

Adăugarea de cursuri

Adăugarea unei clase la un element este simplă. Aplicați doar numele clasei ca argument la adăuga() metodă. Rețineți că, dacă numele clasei există deja pe element, nu va fi adăugat din nou.

<!-- html --><span class="heading" id="headline"></span>
//JavaScriptdocument.getElementById("headline").classList.add("title"); //gives class="heading title"

Pentru a adăuga mai multe clase, separați fiecare clasă cu o virgulă:

<!-- html --><span class="heading" id="headline"></span>
//JavaScriptdocument.getElementById("headline").classList.add("title", "headline"); //gives class="heading title headline"

Eliminarea orelor

Pentru a elimina o clasă, tot ce trebuie să faceți este să transmiteți numele clasei ca argument către elimina() metodă. Dacă numele clasei nu există deja în classList, este aruncată o eroare.

<!-- html --><header class="masthead clearfix" id="header"></header>
//JavaScriptdocument.getElementById("header").classList.remove("masthead"); //gives class="clearfix"

Pentru a elimina mai multe clase, separați fiecare clasă cu o virgulă:

<!-- html --><header class="masthead clearfix headline" id="header"></header>
//JavaScriptdocument.getElementById("header").classList.remove("masthead", "headline"); //gives class="clearfix"

Verificați dacă există o clasă

Folosind contine () metoda, putem verifica dacă o clasă specificată este prezentă într-un element classList și efectuați operațiuni pe baza valorii returnate.

De exemplu:

<!-- html --><button class="hidden" id="btn">Click Me</button>
//JavaScriptvar button = document.getElementById("btn"); if (button.classList.contains("hidden")) {   //do something } else {   //do something else}

Cursuri de comutare

Adăugarea sau eliminarea unei clase bazate pe acțiunea utilizatorului este un lucru obișnuit de făcut. Exact asta am vrut să realizez cu classList.

Puteți comuta între adăugare și eliminare folosind comutare() metodă.

Iată ce am făcut în cele din urmă:

<!-- html --><div class="menu" id="menu" onclick="hasClass()"></div>
//JavaScriptvar page = document.getElementById("page"); var menu = document.getElementById("menu"); var nav = document.getElementById("navigation"); 
function hasClass() {   page.classList.toggle("open");   menu.classList.toggle("active");  nav.classList.toggle("hidden"); }

Verificați numărul de clase

Pentru a afla câte clase sunt aplicate unui element, utilizați lungime proprietate:

<!-- html --><nav class="nav hidden" id="navbar"></nav>
//JavaScriptdocument.getElementById("navbar").classList.length; // 2

Înfășurându-se

După cum puteți vedea, API-ul classList este ușor de utilizat. Vă încurajez să începeți să explorați capacitățile sale în propriile aplicații.

De asemenea, lăsați un comentariu dacă aveți întrebări sau contactați-mă Stare de nervozitate. Pentru mai multe articole ca acesta, verificați blogul meu. Mulțumesc pentru lectură!