Elemente de spectacol HTML folosind JavaScript - Ascunde

CSS-proprietate „invizibilitate“, care ar putea fi adăuga și elimina în mod liber, la elementul HTML nu există. Este nevoie să imite, iar acest lucru este întrebarea dreptul de a cere-show-ascunde comutare.

Specialist - o persoană care, evitând greșelile mici, se deplasează în mod constant la eroarea globală.

Legea lui Murphy de programare, art. 17

Flux similare Specialist: plinătatea lui o singură față.

Kozma Prutkov. Gânduri și aforisme: ideea 101

Pe deficiențele specialiștilor de lucru este deosebit de pagini web notabile. Creați un site ca un joc de șah: nu se poate gândi doar pionii flancul regelui. Sau ca un spectacol al simfoniei: este imposibil să se efectueze numai bass, uitând viori și flaute.

Problema principală, pentru a înțelege articol, se produce atunci când încercați să ascundă elementul de proprietăți să-l atribuindu:

Atribuirea element HTML style.display = "none". modificăm o proprietate existentă, și apoi nu știu cum să obțineți valoarea înapoi. Acest lucru este rău și impas, și un bun conductor ar trebui să fie întrebare. - dar acest lucru este doar cel mai dificil - pentru a formula! „Este posibil să se facă un element invizibil, fără a schimba proprietatea style.display existente?“ - a fost întrebat în cauză ar trebui să conțină jumătate din răspunsul!

Întrebarea corectă este: cum de a face „invizibilitate“ proprietate privată, care poate fi adăugat, pentru a curăța, nu atinge celelalte proprietăți ale elementului. Nu este „dacă“, și anume „cum“, pentru că puteți rezolva orice problemă cu căutare persistentă.

Desigur, orice astfel de proprietate „invizibilitate“ în elementul HTML nu există. Există afișare (bine, sau vizibilitate). Separat adăuga proprietăți „invizibilitate“ trebuie să imite. aceasta este întrebarea dreptul de a cere. Adăugăm un element de ceva, un obiect, iar modificările elementului într-o direcție strict specificate. Apoi, eliminați doar obiectul adăugat, iar modificările aduse dispar odată cu el.

Această soluție presupune că atributul de clasă poate avea mai multe valori simultan, separate prin spații. Și acest lucru este adevărat (ceea ce înseamnă, de exemplu, a învățat cu o mare surpriză - slab învățat în timpul lor W3C). De la linia de complexe (mai multe cuvinte) va șterge o valoare folosind expresii regulate. Ar fi frumos, de asemenea, cu bună știință, nu trage DOM, încă o dată, verificați pentru a șterge valorile din clasa atribut. Aici este întregul funcțiile klassneym triadă la pagina openjs.com .:

Asta ar putea duce la apariția o valoare a atributului „element_hide element_hide element_hide“ (nu este fatală, dar într-un fel. Inestetic). Faptul că spectacolul-ascundere nu este întotdeauna trece literalmente (comutare). De exemplu, eu folosesc adesea un obiecte ascunse pop-up prin apăsarea tastei Esc. și nu pot exclude situația în care orice utilizator avid vrea să apăsați Esc de mai multe ori.

În ir2.js sa bibliotecă Eu încă mai folosesc doar două funcții (add-elimina clasa) cu aceeași expresie regulată (pentru verificarea-înlocuire) fiecare. Mi-a plăcut ideea de a face un test într-o funcție separată. Dar regexps (în funcții-manipularea clasa pe openjs.com) încă mai repetă de două ori! În afară de regexps este făcută astfel încât atunci când trecerea înainte și înapoi în ClassName vor acumula spații suplimentare. Ei bine, din moment ce am luat pentru a optimiza, este necesar să se meargă până la capăt. Ca rezultat, un efort de creier pentru a obține următoarele:

Ascunde-afișează simultan mai multe elemente

În acest caz, sistemul descris mai sus „dreapta“ (schimbarea clasei în loc de stil) în sine oferă un mic câștig - încă nevoie de o buclă. Cu toate acestea, nu este posibil ciclu. Este amuzant că, chiar și în vechiul său manual, în vârstă de 7 ani, am căutat constant (și a găsit!) Soluție la această problemă. Nu este cel mai bun, dar în multe cazuri, ciclul încă mai bine: Pagina schimbat pur și simplu unul dintre fișierele de stil externă. Simplu și brut:

Este clar că, atunci când începe mai întâi va fi să încetinească (atâta timp cât ambele fișier CSS nu zakeshiruyutsya). Ei bine, nu e vorba de asta. Dar bine, soluția perfectă (care nu există). Ea se bazează pe faptul că aveți posibilitatea să atribuiți selectoare reguli nu sunt direct în CSS, cât și prin părinte. Ceva de genul:

și două linii de CSS:

Documentele electronice și filtrare a datelor

articole similare