Cât de corect să implementați funcțiile universale să arătați și să ascundeți pentru DOM un element? Există mai multe opțiuni comune, cu rake diferite, pe care le vom lua în considerare și alegem cel optim.
Luați în considerare cea mai simplă funcție de comutare:
Dezavantajele acestei abordări sunt ușor de văzut. De exemplu, lviv au afișare implicită: inline. Și acest cod va afișa display = "bloc".
Pentru a verifica - faceți clic oriunde pe această diviziune galbenă. aceasta va numi linkul de comutare. Apoi - dați din nou clic pentru a comuta din nou.
Se pare că o ascunde în mod normal, dar spectacolul este incorect.
O problemă similară se va întâmpla la celulele de tabelă care au afișarea standard: celulă de tabelă.
Această problemă este lipsită de următoarea opțiune:
În schimb blocul de proprietate de afișare este resetat - în același timp, primește elementul de afișare al CSS implicit, adică, cel care a fost inițial:
După cum puteți vedea, totul funcționează corect.
Dar aceasta ridică o altă problemă. Proprietatea de afișare a unui element poate fi diferită de cea moștenită de la CSS, de exemplu:
În acest caz, afișarea de zero va reseta această valoare specială.
Pentru o aplicabilitate mai bună, comutați pe două părți: arătați-le și ascundeți-le și depanați-le separat.
Pentru a rezolva problema de mai sus cu rescrierea afișajului - când ascundem elementul, vom scrie valoarea veche afișată în atributul el.displayOld. și când se afișează - pentru a restabili.
Afișați / ascundeți acum dacă link-ul cu afișajul său va funcționa corect.
Cu toate acestea, și această opțiune - pentru noi nimic mai mult decât un interimar.
Funcția de ascundere funcționează bine. Nu puteți spune nimic despre spectacol.
- În primul rând, apelarea înainte de ascundere va reinițializa afișarea. Acest comportament este incorect, trebuie corectat.
- În al doilea rând, și mai important, în cazul în care elementul este ascuns, clasa CSS, apoi arată că nu se va arăta.
De exemplu, arată nu arată linkul din acest exemplu:
Pentru a rezolva această problemă, funcția de afișare trebuie să știe dacă elementul este afișat sau nu. Acest lucru ne va ajuta să facem acces la stilul computerizat - stilul calculat al elementului, acces la care se face în diferite moduri, în funcție de browser.
Următoarea funcție are o valoare reală de afișare din stilul calculat, adică. care se obține prin aplicarea tuturor claselor și proprietăților CSS.
Dacă elementul nu este afișat din cauza clasei CSS, getRealDisplay va returna "none" pentru aceasta.
Poate doriți să eliminați această linie în scopuri de optimizare pentru a face spectacolul mai rapid.
Dar spectacolul nu va funcționa corect atunci când este chemat fără o ascundere precedentă a elementului cu afișaj nestandard.Unde pot obține valoarea afișării pentru a afișa elementul ascuns inițial? Acest lucru nu este neapărat un blocaj. deoarece elementul ar putea fi o referință, o celulă de masă și, într-adevăr, un afișaj "corect" pentru afișarea unui element depinde de locul, de timpul și starea de spirit a programatorului.
În blocul (3.2), funcția plasează un element cu aceeași etichetă la sfârșit
și să-l afișați. care cache-uri în obiectul auxiliar displayCache. Desigur, este doar o presupunere, dar în cazuri simple funcționează.Acest afișaj și este folosit pentru a atribui un element.
- Încercați să obțineți afișarea corectă din memoria cache.
- În cache nu este - adăugați o etichetă goală la . apoi luați-o pentru a afișa.
- Dacă această etichetă are și o afișare reală: nici una, nu a funcționat. Luați blocul. ce altceva trebuie să faceți, elementul este ceva de spus.
- Afișarea valorii estimate este aplicată elementului și este salvată pentru utilizare ulterioară.
Deci, acum puteți face funcția de comutare pe baza spectacolului și a ascunde. pe care elementul vizibil se ascunde, iar invizibilul - dimpotrivă, arată. Cu alte cuvinte, comută starea elementului.
Funcția de comutare în sine este foarte simplă:
Este nevoie de o funcție auxiliară este ascunsă. care determină dacă elementul este vizibil. Desigur, înțelegem vizibilitatea reală, nu proprietatea de afișare a elementului.
Noi folosim pentru acest truc cu offsetWidth / offsetHeight:
Această implementare încearcă să obțină un răspuns, dacă este posibil, folosind offsetWidth / offsetHeight. deoarece este mai rapid decât getRealDisplay.
Deci, aici este codul final toggle.js.
Un exemplu de lucru pe care îl puteți vedea pe o pagină separată.
Această funcție de comutare universală este utilizată pe scară largă în diverse biblioteci, în special în jQuery.
Acum știi că are o serie de operațiuni inutile și dacă dintr-o dată comanda ta se va bâjbâi - imagina ce ar putea fi problema.
Lăsați comutatorul să funcționeze întotdeauna așa cum a fost intenționat!
- versiune tipărită
Articole similare
Trimiteți-le prietenilor: