Ebben a leckében tartjuk a tulajdonságait a Window objektumot, amellyel akkor kap a méret a munkaterületet a böngésző ablak (innerwidth és innerheight), az ablak méretét is (OuterWidth és OuterHeight), helyét A felhasználói képernyő bal felső sarkához képest (ScreenLeft és ScreenOnt) és a pozíciók görgetése (Pagexffset és Pagetyoffset).
Innerwidth és Innerheight tulajdonságok
Úgy tervezték, hogy megkapják a böngésző látható munkaterületének méretét. Azok. Az Innerwidth és Innerheight tulajdonságok úgy vannak kialakítva, hogy megkapják a terület szélességét és magasságát, amelyben a HTML-dokumentum megjelenik. Ezek a tulajdonságok csak olvashatók és visszatérnek a pixelben.
Például kapja meg a böngésző látható munkaterületének magasságát és szélességét:
A látható nézetablak szélessége (Widthcontenarea):
A látható nézetablak szélessége (magasságcontenarea):
Külső verzió és külsőhégali tulajdonságok
Úgy tervezték, hogy megkapják a teljes böngészőablak méretét, azaz Beleértve az eszköztárakat, a görgetősávot, az állapotsávot, az ablakhatárokat stb. A külső verzió és a külsőhulladék tulajdonságai csak olvashatók, és visszaadják az ablak szélességét és magasságát képpontokban.
Például kapja meg a böngészőablak magasságát és szélességét:
Böngésző Windows szélessége (Widthwindow):
Böngésző ablakmagassága (Heighwindow):
Tulajdonságok ScreenLeft (ScreenX) és ScreenTont (Screeny)
A felhasználói képernyő bal felső sarkában lévő böngészőablak bal felső szögének vagy dokumentumának jobb felső szögének koordinátáit.
Ebben az esetben a ScreenLeft és a Screentop tulajdonságai az Internet Explorerben és a Screenx és a Screeny tulajdonságai Mozilia Firefoxban működnek. A Chrome, a Safari böngészők és más hasonló böngészők is felhasználhatók a ScreenLeft és a ScreenTont és a ScreenX és a Screeny tulajdonságok tulajdonságaihoz.
Ezen tulajdonságok használatakor figyelembe kell venni azt a tényt, hogy egyes böngészők visszaállíthatják a dokumentum bal felső szögének koordinátáját, és néhány böngésző koordinálja az ablak bal felső sarkát. A ScreenLeft tulajdonságok (screenx) és a screingont (screeny) csak olvashatók, és visszaadják a távolságértékeket a bal oldali sarokhoz viszonyítva vízszintesen és függőleges képpontokban.
Például visszavonja egy üzenetet a koordináta x és a bal sarokban az aktuális böngészőablak (dokumentum), mint a bal felső sarokban:
Ismerje meg a koordinátákat
Oldalxoffset tulajdonságok (scrollx) és pagetyoffset (scrollx)
Számos képpontot kapnak, amelyekhez a dokumentumot vízszintes (pagneffset) vagy függőleges (pagetyoffset) irányba görgetve az ablak relatív bal felső sarkában. Tulajdonságok Scrollx és Scrollly ekvivalensek szerinti tulajdonságainak PageXoffSet és Pagetyoffset. Ezek a tulajdonságok csak olvashatók.
Például, hogy megjelenítse a képpontok számát, amelyhez a dokumentum görgethető a vízszintes (PageXofFSET) és függőleges (pagetyoffset) irányba.
Ismerje meg a görgetősáv pozícióit
Helló! A lecke témájának folytatásában egy ilyen kérdést weboldalként fogunk megfontolni, és manipuláljuk a böngésző méretét. Hogyan találhatok böngészőszélességet? Hogyan lehet görgetni a JavaScript weboldalon? Válaszok ezekre a kérdésekre, azt hiszem, ebben a leckében találja meg.
A böngészőablak látható részének szélessége / magassága
Az elem ügyfélszívítási / magasság tulajdonságai csak a látható ablak területének szélessége / magassága.
Nem ablak.Innerwidth / Magasság
Meg kell jegyezni, hogy az IE8 kivételével minden böngésző támogathatja az ablakok tulajdonságait.Innerwidth / Innerheight. Mentse az aktuális ablakméretet.
Mi a különbség? Kérdezed. Ez minden bizonnyal kicsi, de rendkívül fontos.
A CRIENTWIDTH / Magasság tulajdonságok, ha van egy görgetősáv, adja vissza a szélességet / magasság belsejében, hozzáférhető a teljes dokumentumhoz, és az ablakhoz.
Ha az oldal jobb oldala a görgetősávot veszi, akkor ezek a sorok különbözőek:
Riasztás (ablak.Innerwidth); // az összes teljes figyelmeztető ablak szélessége (dokumentum.documentElement.clientwidth); // szélesség kevesebb görgetés
Általában csak a rendelkezésre álló ablak szélességét érdekli, például valamit rajzolni, azaz mínusz a görgetősáv. Ezért a dokumentáció.Clientwidth-t gyakran használják.
A weboldal szélessége / magassága, figyelembe véve a görgetést
Igen, elméletileg az oldal látható része a Dokumentelem.Clientwidth / Magasság, de a teljes méret, figyelembe véve a görgetősávot analógia, documentelement.scrollwidth / scrollheight.
Ez igaz minden rendes elemre.
De az oldalakkal ezekkel a tulajdonságokkal kapcsolatban problémát okozhat, ha a görgetés ott van, akkor nem. Ebben az esetben helytelenül dolgoznak. Azt kell mondanom, hogy a Chrome / Safari és az Opera böngészők, a scrollsáv hiányában, a dokumentumelem értéke ebben az esetben is kevesebb, mint a dokumentumelem.
Ez a probléma kifejezetten a dokumentációhoz fordulhat elő.
De lehetséges megbízhatóan meghatározni az oldal méretét, figyelembe véve a görgetést, egyszerűen a maximális tulajdonságok maximumát:
Var scrollvisota \u003d math.Max \u200b\u200b(dokumentum.sody.scrollvisota, document.documentElement.scrollheight, document.body.offetvisota, document.documentemelment.offsetheight, document.bodo.clientvisa, document.documentElement.clientheight); Riasztás ("magasság, figyelembe véve a görgetést:" + scrollvisota);
Az aktuális görgetés megszerzése
Ha a hagyományos elem aktuális görgetéssel rendelkezik a scrollleft / scrolltopban.
Mi van az oldalról?
Az a tény, hogy a legtöbb böngésző helyesen feldolgozza a dokumentációt.Scrolllell / top lekérdezés, azonban a Safari / Chrome / Opera hibákkal rendelkezik, mert dokumentumot kell használnia.
Nos, annak érdekében, hogy teljesen megkerülhesse ezt a problémát, használhatja az ablak tulajdonságait.Pagexoffset / Pagetyoffset:
Riasztás ("az aktuális görgetés felülről:" + window.pageyoffset); Riasztás ("jelenlegi görgetés a bal oldalon:" + window.pagexoffset);
Ezek az összes tulajdonság:
- Az IE8 nem támogatott.
- Csak elolvashatják őket, de lehetetlen változni.
Ha az IE8 nem aggódik, akkor egyszerűen ezeket a tulajdonságokat használjuk.
A Cross-Browser verzió az IE8-mal lehetőséget ad a dokumentációra:
Var scrollltop \u003d window.pageyoffset || document.documentemelment.scrolltop; Riasztás ("aktuális görgetés:" + scrolltop);
Görgetés módosítása Oldal: Scrollto, Scrollby, Scrollintoview
Annak érdekében, hogy az oldalt a JavaScript segítségével gördítsük, minden elemet teljesen betölteni kell.
A ScrollTop / Scrollleft szokásos elemeiben elvileg módosíthatja, és ugyanakkor az elem görgethető.
Senki sem lehet ugyanúgy, mint az oldal. Minden böngészőben, amellett, hogy a Chrome / Safari / Opera, akkor lépjünk egyszerű telepítés document.documentelement.scrolltop, és a megadott - akkor érdemes használni Document.body.ScrollTop erre. És minden tökéletesen fog működni.
De van egy másik, univerzális megoldás - az oldalablakok speciális görgetési módjai.Scrollby (x, y) és ablak.Scrollo (PAGEC, PAGET).
- A Scrollby (X, Y) módszer görgeti a jelenlegi koordinátái.
- A Scrollto (PageX, PAGENCH) módszer görgeti az oldalt a megadott koordinátákhoz a teljes dokumentumhoz képest. Ez egyenértékű lesz a ScrollLelt / ScrollTop tulajdonságok telepítésével. A dokumentum kezdetének görgetéséhez megadhatja a koordinátákat (0,0).
scrollindoview.
Az Elem.scrollLintoview módszer (felső) az elemre kell hívnia, és görgetnie kell az oldalt úgy, hogy az elem a tetejére van-e, ha a felső paraméter igaz, és az alján, ha a felső a FALSE. Ráadásul, ha ez a felső paraméter nincs megadva, akkor ez igaz.
Tilalom görgetés
Vannak olyan helyzetek, amikor egy "nem zúzott" dokumentumot kell készíteni. Például, ha a nagy párbeszédpanel megjelenik a dokumentum felett, hogy a látogató görgethessen ezen az ablakon, de nem maga a dokumentum.
Annak érdekében, hogy megtiltsák az oldal görgetését, elegendő a document.stody.style.ovlow \u003d "rejtett" tulajdonság.
A dokumentum helyett bármely olyan elem lehet, akinek a görgetése tilos.
De ennek a módszernek a hátránya, hogy maga a görgetősáv önmagában eltűnik. Ha elfoglalta a szélességet, akkor most ez a szélesség felszabadul, és az oldal tartalma kibővül, a "ugrás" szöveg, mindent megtesz az üres helyen.
EREDMÉNYEK
- Az ablak látható részének méretének megszerzéséhez ingatlant használ: Document.DocumentElement.clientWidth / Magasság
- Mert figyelembe véve a méret a görgetősáv kell használni: var scrollHeight \u003d Math.max (document.body.scrollHeight, document.documentElement.scrollHeight, document.body.offsetHeight, document.documentElement.offsetHeight, document.body.clientHeight , Document.DocumentElement .clientheight);
Amikor az interfészek kialakítása a helyszíneken gyakran használnia kell a JavaScriptet. Természetesen rossz, de bizonyos helyzetben egyszerűen lehetetlen mindent teljesen végrehajtani a CSS-en.
A leginkább fogságban van, hogy a böngészőablak szélességét vagy magasságát további manipulációkhoz határozzák meg. A téma szerinti összes információ alatt.
Hol lehet hasznos?
Nem fogok beszélni mindenkinek, de lenyűgözött számomra az integrációban a TextPattern "-val" mindenféle galériával, csúszkákkal stb., Amennyiben mindent tiszta JS-re írtak. A JS-hez szorosan kötött dolgok ritkák, de még mindig találkoznak, így ez a jegyzet megjelent.
Meghatározhatja a 2 módot: JS vagy JQUERY.
A szélesség vagy magasság meghatározása tiszta JS-vel
Ez a legelőnyösebb módon, mivel a JavaScript motor szinte minden modern böngészővel rendelkezik. Még a mobil böngészők is megtanultak dolgozni a JS-vel.
Természetesen lehetőség van arra, hogy a felhasználó kezelje a JS feldolgozását a böngészőben, de számomra úgy tűnik számomra, az ilyen "furcsa emberek" nem annyira, mivel szinte minden webhely a JS-n dolgozó megoldásokat használja.
A JS-ben meghatározni képernyőméretekFunkciókat kell használnia:
Screen.width // Képernyő szélessége.Height // Képernyőmagasság
Itt van egy értelmetlen példa:
Ha azt használja, hogy helyezze el néhány elemet az oldalon, akkor a legjobb megoldás nem fogja használni, nem a képernyő méretét, hanem böngésző ablakméretek. JS-ben ez így történik:
Document.body.clientwidth // böngésző szélességű dokumentum.body.clientHeight // böngészőmagasság
Ennek megfelelően itt van egy értelmetlen alkalmazás:
A böngésző méretének meghatározása jquery használatával
Személy szerint az alábbiakban ismertetett módszert használom. Ez a módszer csak akkor működik, ha korábban csatlakoztatta a JQuery könyvtárat az oldalon. Minden olyan webhelyen, amelyet meg kell tennem, ez a könyvtár a Standard de / Infact.
A JQuery feladatunkhoz használni kell a kódot:
$ (Ablak) .Width (); // böngésző szélessége $ (ablak) .height (); // böngészőmagasság
És a végén azt szeretném mondani, hogy ha a JS és a jquery nélkül is lehetséges, vagy részben, akkor szükség van cselekedni.
Megmondani a társadalmi. Hálózatok
Mi szükséges? Például, van egy szép elrendezés a webhelyen, amelyet minden szépség kiállítása csak akkor, ha megoldja, azt mondja, 1600 per 1200. Például nagyon nagy szép kalapja van. Mi fog történni, ha egy személy 1024-től 768-ig terjedő állásfoglalásban megy az oldalra? Igen, csak a kalap lesz látható. Nem jó? Talán. Akkor miért ne tegyen ilyen dolgot, hogy amikor a böngésző magassága / képernyője, a kalap egyszerűen leállt, és elment a menübe és a helyszín többi részébe? Ban, ami szükséges.
Valójában leírtam az egyik példát, amelyet a gyakorlatban tapasztaltam (lásd a CartiMintka). Megoldotta a problémát egyszerűen - a JavaScript segítségével. És talán a jquery, nem emlékszem. Itt leírom mindkét módszert.
Először is meg kell különböztetni a meghatározást " képernyőfelbontás"És" böngésző ablakmérete"(Mivel egyes cikkekben voltak incidensek - jégeső önmagukban, felajánlották másokat, bár egy esetben mérem a böngésző felbontását a másikban - a monitor felbontása).
Meg kell határozni a kezdetektől fogva, hogy fontosabb az Ön számára. Ebben az esetben egy példa egy sapkával, a képernyőfelbontásra összpontosítottam (monitor): Mindegy, a webhely gyönyörű, ha a böngészőablakot manuálisan csökkentik, majd hagyja, hogy a böngésző elinduljon, amikor megtekintheti ezt a webhelyet (nincs semmi eszik kb.). De például a JQuery lightbox galéria kibővített képének beállításához a böngésző szélességét és magasságát használtam.
És miután kiválasztotta, írja be a kódot, akkor a webhely fejlécében lehet. Először is, egy példa szerint képernyőfelbontás.
3-6 sor - tiszta JavaScript, 7-11 sor - egy példa a jquery. JavaScript módszereket használnak a szélesség és magasság meghatározására. Szélesség és képernyő. HIGHT módszerek. Milyen sorokból készülnek, törölve: Az első szkript az opcionális CSS-fájl elérési útját írja elő, a másik pedig a teljes azonosító blokkra, a CSS "Background Position" tulajdonság található.
Megnézzük a második példát, de amely a böngésző felbontására összpontosít. Mindegy, a módszerek megváltoztak.
Tehát két példa, rövid áttekintés - mit kell használni, hogy mi:
- képernyő.Hát. Meghatározza a képernyő szélességét (monitor).
- screen.height. Meghatározza a képernyő magasságát (monitor).
- document.body.clientwidth.. Meghatározza a böngésző szélességét.
- document.body.clientheight. Meghatározza a böngésző magasságát.
- $ (Ablak). Width (). Meghatározza a böngésző szélességét, de csak akkor, ha jquery van.
- $ (Ablak) .height (). Meghatározza a böngésző magasságát, de csak akkor, ha jquery van.
Nyilvánvaló, hogy ha JQUIERY-t használ, akkor a 3, és a 6, a 6-os, mint a 4-es lehetőség közül választhat, akkor rövidebbek. Nos, és így - az íz és a szín.
Ami a specifikus magasságrekordokat és a képernyők szélességét illeti, akkor az igazságban nem ismerem őket. Elméletileg az 5-6-as típusú sorok kialakítása, de valahogy nem találkozott a gyakorlatban, adok nekem, nem. Igen, és nincs szükség, a képernyőn. Nedves, elég elég kialakítás, elég.
Igen, még mindig $ (dokumentum). Width () - meghatározza a HTML-dokumentum szélességét. Használja a gyakorlatban - valahogy kétséges. Ki tudja - örülök, ha megosztod.
Ma mindent! Tartsa a hétvégét, és masszívan megy a kebabs! (Hacsak nem beteg, mint valami, mint néhány - kb.). Sok szerencsét!
