În această lecție, luăm în considerare proprietățile obiectului ferestrei, cu care puteți obține dimensiunea ferestrei spațiului de lucru a ferestrei browserului (Innerwidth și Innerreight), dimensiunea ferestrei însăși (outerime și outerieight), locația sa în raport cu stanga colțul de sus Ecranul utilizatorului (ecranul ecranul și ecranul) și dispozițiile de defilare (Pagxoffset și PagineoffFset).

Proprietățile interioare și interioare

Acestea sunt proiectate pentru a obține dimensiunile ferestrei spațiului de lucru vizibil al browserului. Acestea. Proprietățile interioare și innerheight sunt proiectate pentru a obține lățimea și înălțimea zonei în care este afișat documentul HTML. Aceste proprietăți sunt doar citite și returnează valorile în pixeli.

De exemplu, obțineți înălțimea și lățimea ferestrei spațiului de lucru vizibil al browserului:

Lățimea de vizualizare vizibilă (WidthContenarea):

Lățimea de vizualizare vizibilă (HeightContenarea):

Proprietățile externe și externe

Acestea sunt concepute pentru a obține dimensiunea întregii ferestre a browserului, adică Inclusiv barele de instrumente, bara de derulare, bara de stare, limitele ferestrelor etc. Proprietățile externe și Outerheight sunt doar citite și au returnat lățimea și înălțimea ferestrei în pixeli.

De exemplu, obțineți înălțimea și lățimea ferestrei browserului:

Lățimea ferestrei browserului (Widthwindow):

Înălțimea ferestrei browserului (Wighwindow):

Proprietăți ecran Eleft (ecranx) și ecranont (screeny)

Acestea sunt destinate să obțină coordonatele unghiului superior din stânga al ferestrei browserului sau al documentului din colțul din stânga sus al ecranului de utilizator.

În acest caz, proprietățile ecraneleft și Screenop lucrează în Internet Explorer și proprietățile Screenx și Screeny din Mozilia Firefox. ÎN browserele Chrome, Safari și alte browsere similare pot fi utilizate atât proprietățile ecranului, cât și ale ecranului și proprietățile ecranului și screeny.

Atunci când se utilizează aceste proprietăți, este necesar să se țină seama de faptul că unele browsere pot returna coordonatul unghiului superior din stânga al documentului, iar unele browsere coordonează colțul din stânga sus al ferestrei. Proprietăți de ecran (screenx) și ecranont (screeny) sunt doar pentru citire și au returnat valorile distanței față de colțul din stânga orizontal și vertical în pixeli.

De exemplu, retrageți un mesaj al coordonatei X și în colțul din stânga al ferestrei de browser curent (document) față de colțul din stânga sus al ecranului:

Aflați coordonatele

Proprietăți PagexOffset (Scrollx) și Pagineoffset (Scrollx)

Acestea sunt destinate să obțină un număr de pixeli la care documentul a fost derulat într-o direcție orizontală (Pagneffset) sau verticală (PagneTyoffsetset) a colțului din stânga sus superior al ferestrei. Proprietăți Scrollx și derulare sunt echivalente în funcție de proprietățile PagexOffset și PagineoffsetFset. Aceste proprietăți sunt doar citite.

De exemplu, pentru a afișa numărul de pixeli la care documentul a fost derulat în direcția orizontală (PagexOffset) și verticală (Paguetyoffsetset).

Aflați pozițiile barei de defilare

Buna! În continuarea subiectului în această lecție, vom lua în considerare o astfel de întrebare ca o pagină web derulare și vom manipula dimensiunile browserului. Cum pot găsi o lățime a browserului? Cum de a derula pagina web JavaScript? Răspunsuri la aceste întrebări Cred că veți găsi în această lecție.

Lățimea / înălțimea părții vizibile a ferestrei browserului

Proprietățile clientului / înălțimii pentru element sunt doar lățimea / înălțimea zonei ferestrelor vizibile.


Nu fereastră.inrwidth / înălțime

Trebuie remarcat faptul că toate browserele, cu excepția IE8, pot, de asemenea, să suporte proprietățile ferestrei.Innerwidth / innershight. Ei salvează dimensiunea curentă a ferestrei.

Care este diferența? Tu intrebi. Este cu siguranță mic, dar extrem de important.

Proprietăți client / înălțime, dacă există o bară de derulare, returnați lățimea / înălțimea în interiorul acestuia, accesibilă întregului document și ferestrei.Innerwidth / înălțime - va ignora prezența acesteia.

În cazul în care un partea dreaptă Paginile iau bara de defilare, apoi aceste linii vor elimina lucruri diferite:

Alertă (fereastră.inrwidth); // toată lățimea ferestrei de alertă completă (document.documentelement.clientwidth); // lățime mai puțin derulați

De obicei, suntem interesați doar de lățimea ferestrei disponibile, de exemplu, pentru a desena ceva, adică minus bara de defilare. Prin urmare, este adesea utilizată Documentement.

Lățimea / înălțimea paginii web luând în considerare defilarea contului

Da, teoretic, partea vizibilă a paginii este Documentelement.Clientwidth / Înălțime, dar dimensiunea completă luând în considerare bara de derulare este prin analogie, documenteluie.scrolllowth / derulare.

Acest lucru este valabil pentru toate obiectele obișnuite.

Dar pentru pagina cu aceste proprietăți, poate exista o problemă atunci când derularea este acolo, atunci nu este. În acest caz, ei lucrează incorect. Trebuie să spun că în browserele Chrome / Safari și Opera, în absența unui bara de defilare, valoarea documentamentelor.scrollhight în acest caz poate fi chiar mai mică decât Documentelement.Clienthight, care, desigur, arată ca ceva nu este logic

Această problemă poate apărea în mod specific pentru Documentelement.

Dar este posibil să determinați în mod fiabil dimensiunea paginii, luând în considerare defilarea, pur și simplu luând maximum mai multe proprietăți:

Var Scrollvisota \u003d Math.Max \u200b\u200b(document.body.scrollvisota, document.documentelement.scrollhight, document.bod.offsetvisota, document.documentelement.offsetheight, document.body.clientvisota, document.documentelement.clienthight); Alertă ("înălțime, luând în considerare defilarea:" + Scrollvisota);

Obținerea derulării curente

Dacă elementul convențional are o derulare curentă în scrollleft / scrolltop.

Cum rămâne cu pagina?

Faptul este că majoritatea browserelor vor procesa corect interogarea Documentelement.scrolllell / TOP, cu toate acestea, Safari / Chrome / Opera are erori deoarece ar trebui să utilizați document.bine.

Ei bine, pentru a trece complet această problemă, puteți utiliza proprietățile ferestrei.pagexoffset / pagutetyoffset:

Alertă ("derulare curentă de sus:" + fereastră.pageyoffset); Alertă ("derulare curentă în partea stângă:" + fereastră.pagexoffset);

Aceste proprietăți:

• IE8 nu este acceptat.
• Ei le pot citi numai, dar este imposibil să se schimbe.

Dacă IE8 nu este îngrijorat, atunci pur și simplu folosim aceste proprietăți.

Versiunea Cross-Browser cu IE8 oferă opțiunea Documentelement:

Var scrollltop \u003d fereastră.pageyoffset || document.documentelement.scrolltop; Alertă ("Derulați curenți:" + Scrolltop);

Scroll Schimbare pagină: Scrollo, derulare, derulare, Derlrolloview

Pentru a derula pagina utilizând JavaScript, toate elementele trebuie să fie complet încărcate.

Pe elementele obișnuite ale Scrolltop / Scrollleft, în principiu, vă puteți schimba și, în același timp, elementul va derula.

Nimeni nu te deranjează în același mod și cu pagina. În toate browserele, în plus față de Chrome / Safari / Opera, puteți derula prin documentul de instalare simplă.documentelement.scrollltop și în cele specificate - ar trebui să utilizați document.body.scrolltop pentru acest lucru. Și totul va funcționa perfect.

Dar există o altă soluție universală - metode speciale Scroll pagini fereastră.Scrollby (x, y) și fereastră.scrollto (Pagec, Pageang).

• Metoda Scrollby (x, y) va derula prin coordonatele sale curente.
• Scrollto (Pagex, Paget) derulează pagina la coordonatele specificate Cu privire la tot documentul. Acesta va fi echivalent cu instalarea proprietăților Scrolllellft / Scrollptop. Pentru a derula la începutul documentului, puteți specifica coordonatele (0.0).

scrollindoview.

Metoda EleM.Scrolllovie (sus) trebuie să fie apelată pe element și derulează pagina astfel încât elementul să fie de sus, dacă parametrul superior este adevărat și în partea de jos, dacă partea de sus este egală cu falsul. Mai mult, dacă acest parametru de top nu este specificat, acesta va fi egal cu adevărat.

Interzicerea derulării

Există situații în care este necesar să faceți un document "non-zdrobit". De exemplu, când caseta de dialog mare este afișată deasupra documentului, astfel încât vizitatorul să poată derula această fereastră, dar nu documentul în sine.

Pentru a interzice derularea paginii, este suficient să livrați documentul.body.style.overflow \u003d "ascunsă" proprietate.

În loc de document.bodic, poate exista orice element al cărui defilare trebuie interzisă.

Dar dezavantajul acestei metode este că bara de derulare în sine dispare. Dacă a ocupat o lățime, atunci acum această lățime este eliberată, iar conținutul paginii va fi extins, textul "Jump", luând tot locul liber.

Rezultate

• Pentru a obține dimensiunile părții vizibile a ferestrei, utilizează proprietatea: document.documentelement.Clientwidth / înălțime
• Pentru a ține seama de dimensiunea barei de defilare: VAR DRILLHERGHT \u003d MATH.MAX (document.body.scrollhight, document.documentelement.scrolllight, document.body.offsetheight, document.documentelement.offsetheight, document.body.clienthight , document.documentelement .Clienthight);

La dezvoltarea interfețelor pentru site-uri adesea trebuie să utilizați JavaScript. Bineînțeles că este rău, dar într-o anumită situație este pur și simplu imposibil să se implementeze totul complet pe CSS.

Cea mai captivă necesită pentru a avea în determinarea lățimii sau înălțimii ferestrei browserului pentru mai multe manipulări. Sub reducerea tuturor informațiilor de pe această temă.

Unde poate veni la îndemână?

Nu voi vorbi pentru toată lumea, dar este impresionată de mine în integrarea cu textul, de toate tipurile de galerii, glisiere etc., unde totul este scris pe JS PURE. Lucrurile care sunt strâns legate de JS sunt rare, dar se întâlnesc încă, astfel încât a apărut această notă.

Puteți defini 2 moduri: js sau jquery.

Determinarea lățimii sau înălțimii folosind JS PURE

Acesta este cel mai preferat mod, deoarece motorul JavaScript este aproape de fiecare browser modern. Chiar și browserele mobile au învățat să lucreze cu JS.

Desigur, există o posibilitate ca utilizatorul să fie tratat pentru a dezactiva procesarea JS în browser, dar mi se pare că "oameni ciudați" nu sunt atât de mult, deoarece aproape fiecare site folosește orice soluții care funcționează pe JS.

În js pentru a determina dimensiuni ecranTrebuie să utilizați funcții:

Screen.Width // Lățimea ecranului Screen.Height // Înălțimea ecranului

Iată un exemplu lipsit de sens al utilizării:

Dacă îl utilizați pentru poziționarea unor elemente pe pagină, atunci o mai bună decizie nu va folosi dimensiunile ecranului, ci dimensiuni ale ferestrei browserului. În JS se face așa:

Document.body.clientwidth // Lățime de browser document.body.clienthight // Înălțimea browserului

În consecință, aici este un exemplu lipsit de sens:

Definiția dimensiunilor browserului utilizând jQuery

Personal, folosesc metoda descrisă mai jos. Această metodă funcționează numai dacă ați conectat anterior biblioteca jQuery de pe site. Pe toate locațiile pe care trebuie să le fac această bibliotecă este standardul / infact.

Pentru a utiliza pentru sarcina noastră jQuery, trebuie să utilizați codul:

$ (Fereastră) .Width (); // lățimea browserului $ (fereastră). (); // Înălțimea browserului

Și la sfârșit aș dori să spun că, dacă este posibil să se facă fără JS și JQuery în general sau parțial, atunci este necesar să acționăm.

Să spună în social. Rețele

Pentru ce este necesar? De exemplu, avem un aspect frumos al site-ului, pe care toată frumusețea ei expune numai atunci când se rezolvă, spun, 1600 pe 1200. De exemplu, are o pălărie foarte mare. Ce se va întâmpla dacă o persoană merge la site la o rezoluție de 1024 la 768? Da, numai pălăria va fi vizibilă. Nu e bun? Poate. Atunci de ce să nu faceți un astfel de lucru că atunci când înălțimea / ecranul browserului, pălăria ar fi tăiată pur și simplu și a mers la meniu și restul site-ului? În, ceea ce este necesar.

De fapt, am descris unul dintre exemplele pe care le-am întâlnit în practică (a se vedea Cartetiginkka). A rezolvat problema pur și simplu - prin JavaScript. Și poate prin jquery, nu-mi amintesc. Voi descrie ambele metode aici.

În primul rând este necesar să se distingă definiția " rezolutia ecranului"Și" dimensiunea ferestrei browserului"(Din moment ce în unele articole au existat incidente - doar metode de grindină, li sa oferit altele, deși într-un caz măsoară rezoluția browserului, în cealaltă - rezoluția monitorului).

Este necesar să se determine de la bun început că este mai important pentru dvs. În acest caz de exemplu cu un capac, m-am concentrat pe rezoluția ecranului (monitor): toate acestea, site-ul este frumos dacă fereastra browserului este redusă manual, apoi lăsați browserul să înceapă când vizualizează acest site (nu există nimic mânca aproximativ). Dar, de exemplu, pentru a ajusta imaginea expandată a galeriei jQuery Lightbox. Am folosit lățimea și înălțimea browserului.

După ce ați ales, scrieți codul, puteți în antetul site-ului. În primul rând, un exemplu orientat spre rezolutia ecranului.

3-6 linii - Pure JavaScript, 7-11 linii - un exemplu pe jquery. Pentru a determina lățimea și înălțimea sunt utilizate javaScript Metode. Ecran.width și ecran .Hight. Ce fac rânduri, este clar: primul script prescrie calea spre plus fișierul CSS.iar celălalt - pentru un bloc cu un identificator total pune cSS proprietate "Poziția de fundal".

Ne uităm la al doilea exemplu, dar care se va concentra pe rezoluția browserului. La fel, metodele s-au schimbat.

Deci, din două exemple revizuire scurtă - Ce să folosim pentru ce:

1. ecran.Width.. Definește lățimea ecranului (monitor).
2. screen.Hight.. Determină înălțimea ecranului (monitor).
3. document.body.Clientwidth.. Determină lățimea browserului.
4. document.body.clienthight.. Determină înălțimea browserului.
5. $ (Fereastră) .width (). Determină lățimea browserului, dar numai dacă aveți jQuery.
6. $ (Fereastră) .hight (). Determină înălțimea browserului, dar numai dacă aveți jQuery.

Este clar că dacă utilizați jQuery, este preferabil să 5 opțiuni decât 3 și 6 mai degrabă decât 4 - sunt mai scurte. Ei bine, și așa - gustul și culoarea.

În ceea ce privește înregistrările și lățimea de înălțime specifică a ecranelor pentru jQuery - atunci, în adevăr, nu le cunosc. În teorie, designul rândurilor de tip 5-6 ar trebui să fie, dar într-un fel nu a venit peste practică, mă dau, nu sunt. Da, și nu este nevoie, screen.Width este un design suficient de scurt, este de ajuns.

Da, există încă $ (document) .Width () - determină lățimea HTML Document.. Utilizați în practică - cumva îndoielnic. Cine știe - mă bucur dacă împărțiți.

Astăzi totul! Păstrați până la weekend și mergeți masiv pe kebabs! (Dacă nu sunteți bolnav cu ceva de genul unora - aprox.). Noroc!