Kuinka määrittää js-sivun korkeus. Kuinka määrittää "näytön resoluutio" ja "selainikkunan koko" JavaScriptissä ja jQueryssä. Sivun vierityksen muuttaminen: scrollTo, scrollBy, scrollIntoView

Verkkosivustojen käyttöliittymiä kehitettäessä joudut usein käyttämään JavaScriptiä. Tämä on tietysti huono asia, mutta joissain tilanteissa on yksinkertaisesti mahdotonta toteuttaa kaikkea kokonaan CSS:ssä.

Yleisin tarve, joka minulla on, on määrittää selainikkunan leveys tai korkeus lisäkäsittelyä varten. Leikkauksen alla on kaikki tiedot tästä aiheesta.

Missä tästä voi olla hyötyä?

En puhu kaikkien puolesta, mutta tämä on hyödyllinen minulle integroitaessa Textpatternin kanssa kaikenlaisia ​​gallerioita, liukusäätimiä jne., joissa kaikki on kirjoitettu puhtaalla JS:llä. JS:ään tiukasti sidotut asiat ovat harvinaisia, mutta niitä tapahtuu, minkä vuoksi tämä huomautus ilmestyi.

Voit määrittää sen kahdella tavalla: JS tai jQuery.

Leveyden tai korkeuden määrittäminen puhtaalla JS:llä

Tämä on suosituin tapa, koska melkein jokaisessa nykyaikaisessa selaimessa on JavaScript-moottori. Jopa mobiiliselaimet ovat oppineet toimimaan JS:n kanssa.

Tietysti on mahdollista, että käyttäjä itse poistaa JS-käsittelyn käytöstä selaimessa, mutta minusta näyttää siltä, ​​​​että tällaisia ​​"outoja ihmisiä" ei ole paljon, koska melkein jokainen sivusto käyttää jonkinlaista JS: llä toimivaa ratkaisua.

JS:ssä näytön koon määrittämiseksi sinun on käytettävä toimintoja:

Screen.width //Näytön leveys screen.height //Näytön korkeus

Tässä turha käyttöesimerkki:

alert(screen.width+"x"+screen.height);

Jos käytät tätä sijoittamaan joitain elementtejä sivulle, paras ratkaisu olisi käyttää selainikkunan mittoja näytön koon sijaan. JS:ssä tämä tehdään näin:

Document.body.clientWidth //Selainleveys document.body.clientHeight //Selain korkeus

Tästä syystä tässä on merkityksetön esimerkki käytöstä:

hälytys(asiakirja.runko.asiakkaan leveys+"x"+dokumentti.kappale.asiakkaan korkeus);

Selaimen koon määritys jQuerylla

Henkilökohtaisesti käytän alla kuvattua menetelmää. Tämä menetelmä toimii vain, jos olet aiemmin asentanut jQuery-kirjaston sivustollesi. Kaikilla sivustoilla, jotka minun on luotava, tämä kirjasto on de facto standardi.

Käyttääksemme jQueryä tehtävässämme meidän on käytettävä koodia:

$(ikkuna).width(); //Selainleveys $(ikkuna).height(); //Selaimen korkeus

Ja lopuksi haluaisin sanoa, että jos on mahdollista tehdä ilman JS:ää ja jQueryä yleensä tai osittain, niin tämä on juuri se, mitä sinun on tehtävä.

Jaa sosiaalisessa mediassa verkkoja

Mitä varten tämä on? Meillä on esimerkiksi kaunis verkkosivuston ulkoasu, joka näyttää kaiken kauneutensa vain esimerkiksi resoluutiolla 1600 x 1200. Siinä on esimerkiksi erittäin suuri kaunis otsikko. Mitä tapahtuu, jos henkilö vierailee sivustolla resoluutiolla 1024 x 768? Kyllä, vain hattu tulee näkyviin. Ei hyvä? Kenties. Mikset sitten tekisi sellaista, että selaimen/näytön korkeuden vuoksi otsikko yksinkertaisesti leikattaisiin pois ja valikko ja muu sivusto menisi? Vau, juuri sitä mitä tarvitset.

Itse asiassa kuvailin yhtä esimerkistä, jonka tapasin käytännössä (katso kuva). Ratkaisin ongelman yksinkertaisesti - javascriptin kautta. Tai ehkä jQueryn kautta, en muista. Kuvaan tässä molemmat menetelmät.

Ensinnäkin on tarpeen erottaa "näytön resoluution" ja "selainikkunan koon" määritelmät (koska joissakin artikkeleissa oli tapauksia - he kritisoivat joitain menetelmiä, ehdottivat muita, vaikka yhdessä tapauksessa he mittasivat selaimen resoluutiota, toisessa - näytön resoluutio).

Sinun on määritettävä alusta alkaen, mikä on sinulle tärkeämpää. Tuon otsikon esimerkin tapauksessa minua ohjasi näytön (näytön) resoluutio: sivusto on loppujen lopuksi kaunis, jos selainikkunaa pienennetään manuaalisesti, anna heidän laajentaa selaimensa koko näytölle tätä katsellessa sivusto (heillä ei ole liiketoimintaa, tiedätkö - toimittajan huomautus). Mutta esimerkiksi jQuery Lightbox -gallerian laajennetun kuvan säätämiseen käytin selaimen leveyttä ja korkeutta.

Ja kun olemme valinneet, kirjoitamme koodin, ehkä sivuston otsikkoon. Ensimmäinen esimerkki, joka keskittyi näytön resoluutioon.

Rivit 3-6 ovat puhtaasti JavaScriptiä, rivit 7-11 ovat esimerkki jQuerysta. Leveyden ja korkeuden määrittämiseen käytetään javascript-menetelmiä screen.width ja screen.height. Mitä rivit tekevät, on selvää: ensimmäinen komentosarja määrittää polun lisätiedosto CSS, ja toinen asettaa "background-position" css-ominaisuuden lohkolle, jonka tunniste on yhteensä.

Katsotaanpa toista esimerkkiä, joka keskittyy selaimen resoluutioon. Kaikki on sama, menetelmät ovat muuttuneet.

Joten kahdesta esimerkistä lyhyt katsaus siihen, mitä käyttää mihinkin:

screen.width. Määrittää näytön (näytön) leveyden.

näyttö.korkeus Määrittää näytön (näytön) korkeuden.

document.body.clientWidth . Määrittää selaimen leveyden.

document.body.clientHeight . Määrittää selaimen korkeuden.

$(ikkuna).width() . Määrittää selaimen leveyden, mutta vain jos jQuery on olemassa.

$(ikkuna).korkeus() . Määrittää selaimen korkeuden, mutta vain jos jQuery on läsnä.

On selvää, että jos käytät jQueryä, vaihtoehto 5 on parempi kuin 3 ja 6 - 4 - ne ovat yksinkertaisesti lyhyempiä. No, se riippuu mausta ja väristä.

Mitä tulee erityisiin merkintöihin näytön korkeudelle ja leveydelle jQuerylle, en tunne niitä rehellisesti. Teoriassa pitäisi olla 5-6 rivin kaltainen rakenne, mutta jotenkin en ole käytännössä törmännyt siihen, minusta tuntuu, että niitä ei ole olemassa. Eikä se ole välttämätöntä, screen.width on tarpeeksi lyhyt rakenne, se riittää.

Kyllä, siellä on myös $(document).width() - määrittää HTML-dokumentin leveyden. Käytännössä käyttö on jotenkin kyseenalaista. Kuka tietää, olen iloinen, jos jaat.

Siinä kaikki tältä päivältä! Jatketaan viikonloppuun asti ja mennään massagrilleille! (ellet ole sairas johonkin, kuten joihinkin - toimittajan huomautus). Onnea!

Hei! Jatkamalla tämän oppitunnin aihetta, tarkastelemme Web-sivun vierittämistä ja selainkokojen manipulointia. Miten löydät selaimen leveyden? Kuinka vierittää verkkosivua JavaScriptin avulla? Uskon, että löydät vastaukset näihin kysymyksiin tältä oppitunnilta.

Selainikkunan näkyvän osan leveys/korkeus Elementin clientWidth/Height-ominaisuudet ovat täsmälleen ikkunan näkyvän alueen leveys/korkeus.


Ei ikkuna.sisäleveys/korkeus

On huomattava, että kaikki selaimet paitsi IE8 voivat tukea myös window.innerWidth/innerHeight-ominaisuuksia. He säästävät nykyinen koko ikkuna.

Mitä eroa? Kysyt. Se on tietysti pieni, mutta erittäin tärkeä.

Jos vierityspalkki on olemassa, clientWidth/Height-ominaisuudet palauttavat tarkalleen sen sisällä olevan leveyden/korkeuden, joka on käytettävissä koko asiakirjassa, ja window.innerWidth/Height jättää sen läsnäolon huomioimatta.

Jos sivun oikealla puolella on vierityspalkki, nämä rivit näyttävät eri asioita:

Alert(window.innerWidth); // ikkunan hälytyksen koko koko leveys(document.documentElement.clientWidth); // leveys miinus vieritys

Yleensä olemme kiinnostuneita vain ikkunan käytettävissä olevasta leveydestä, esimerkiksi piirtämään jotain, eli miinus vierityspalkkia. Siksi asiakirjaa documentElement.clientWidth käytetään usein.

Web-sivun leveys/korkeus vieritys huomioiden

Kyllä, teoriassa sivun näkyvä osa on documentElement.clientWidth/Height, mutta täysikokoinen vierityspalkki mukaan lukien on analogisesti documentElement.scrollWidth/scrollHeight.

Tämä koskee kaikkia tavallisia elementtejä.

Mutta sivulla, jolla on nämä ominaisuudet, voi syntyä ongelma, kun vieritys joko on olemassa tai ei. Tässä tapauksessa ne eivät toimi oikein. On sanottava, että sisään Chrome-selaimet/ Safarissa ja Operassa, jos vierityspalkkia ei ole, documentElement.scrollHeightin arvo voi tässä tapauksessa olla jopa pienempi kuin documentElement.clientHeight, mikä tietysti näyttää joltain epäloogiselta

Tämä ongelma saattaa ilmetä erityisesti documentElementille.

Voit kuitenkin määrittää sivun koon luotettavasti vierittämällä yksinkertaisesti ottamalla suurimman mahdollisen näistä useista ominaisuuksista:

Var scrollVisota = Math.max(document.body.scrollVisota, document.documentElement.scrollHeight, document.body.offsetVisota, document.documentElement.offsetHeight, document.body.clientVisota, document.documentElement.clientHeight); alert("Korkeus mukaan lukien vieritys: " + scrollVisota);

Haetaan nykyistä rullaa

Jos tavallisella elementillä on nykyinen vieritys, voit saada sen kohdasta scrollLeft/scrollTop.

Entä sitten sivu?

Asia on siinä, että useimmat selaimet käsittelevät pyynnön documentElement.scrollLeft/Top oikein, mutta Safarissa/Chromessa/Operassa on virheitä, jotka vaativat asiakirjan document.body käyttöä.

No, kiertääksesi tämän ongelman kokonaan, voit käyttää window.pageXOffset/pageYOffset ominaisuuksia:

Alert("Nykyinen vieritys: " + window.pageYOffset); alert("Nykyinen vasen vieritys: " + window.pageXOffset);

Nämä ovat kaikki ominaisuuksia:

• Ei tuettu IE8-
• Niitä voi vain lukea, eikä niitä voi muuttaa.

Jos IE8:lla ei ole väliä, käytämme vain näitä ominaisuuksia.

Selainten välinen vaihtoehto, joka ottaa huomioon IE8:n, tarjoaa vaihtoehdon documentElementissä:

Var scrollTop = window.pageYOffset || document.documentElement.scrollTop; alert("Nykyinen vieritys: " + scrollTop);

Sivun vierityksen muuttaminen: scrollTo, scrollBy, scrollIntoView

Jotta sivua voidaan vierittää JavaScriptin avulla, sen kaikkien elementtien on oltava täysin ladattuja.

Tavallisissa elementeissä scrollTop/scrollLeft voidaan periaatteessa muuttaa, jolloin elementti rullaa.

Kukaan ei estä sinua tekemästä samaa sivun kanssa. Kaikissa selaimissa paitsi Chrome/Safari/Opera, voit vierittää yksinkertaisesti asettamalla document.documentElement.scrollTop, ja näissä selaimissa sinun tulee käyttää document.body.scrollTop tätä varten. Ja kaikki tulee toimimaan loistavasti.

Mutta on toinen, yleinen ratkaisu - erityiset sivun vieritysmenetelmät window.scrollBy(x,y) ja window.scrollTo(sivuX,sivuY).

• ScrollBy(x,y)-menetelmä vierittää sivua suhteessa sen nykyisiin koordinaatteihin.
• ScrollTo(sivuX,sivuY) -menetelmä vierittää sivua määritettyihin koordinaatteihin suhteessa koko asiakirjaan. Se vastaa scrollLeft/scrollTop-ominaisuuksien asettamista. Asiakirjan alkuun vierittääksesi sinun tarvitsee vain määrittää koordinaatit (0,0).

vieritä näyttöön

Elementissä täytyy kutsua elem.scrollIntoView(top)-metodia, joka vierittää sivua niin, että elementti on ylhäällä, jos yläosa on tosi, ja alareunassa, jos yläosa on epätosi. Lisäksi, jos tätä ylintä parametria ei ole määritetty, se on yhtä suuri kuin tosi.

Scrollin esto

On tilanteita, joissa asiakirjasta on tehtävä "ei-vieritettävä". Esimerkiksi suuren valintaikkunan näyttäminen asiakirjan yläpuolella, jotta vierailija voi selata valintaikkunaa, mutta ei itse asiakirjaa.

Voit estää sivun vierityksen asettamalla ominaisuus document.body.style.overflow = "hidden".

Tiedoston document.body sijasta voi olla mikä tahansa elementti, jonka vieritys on estettävä.

Mutta tämän menetelmän haittana on, että vierityspalkki katoaa. Jos se vei tietyn leveyden, nyt tämä leveys vapautetaan ja sivun sisältö laajenee, teksti "hyppää" viemällä kaiken vapaan tilan.

Tulokset

• Saadaksesi ikkunan näkyvän osan mitat, käytä ominaisuutta document.documentElement.clientWidth/Height
• Jos haluat saada sivun mitat vierittämällä huomioon, käytä: var scrollHeight = Math.max(document.body.scrollHeight, document.documentElement.scrollHeight, document.body.offsetHeight, document.documentElement.offsetHeight, document.body.clientHeight, document. documentElement .clientHeight);

Tällä oppitunnilla tarkastelemme ikkunaobjektin ominaisuuksia, joilla saat selainikkunan työalueen mitat (sisäleveys ja sisäkorkeus), itse ikkunan mitat (ulkoleveys ja ulkokorkeus), sen sijainti suhteessa käyttäjän näytön vasempaan yläkulmaan (screenLeft ja screenTop) ja paikat vieritetään (pageXOffset ja pageYOffset).

innerWidth ja innerHeight ominaisuudet

Ne on suunniteltu saamaan selainikkunan näkyvän työalueen mitat. Nuo. Ominaisuuksilla innerWidth ja innerHeight on tarkoitus saada HTML-dokumentin näyttöalueen leveys ja korkeus. Nämä ominaisuudet ovat vain luku -tilassa ja palauttavat pikseliarvoja.

Hanki esimerkiksi selainikkunan näkyvän työalueen korkeus ja leveys:

Näkyvän katselualueen leveys (widthContenArea):

Näkyvän katselualueen leveys (heightContenArea):

// näkyvän näkymän leveys (kaikki selaimet paitsi Internet Explorer 8) var widthContenArea = window.innerWidth; // näkyvän näkymän korkeus (kaikki selaimet paitsi Internet Explorer 8) var heightContenArea = window.innerHeight; // näkyvän näkymän leveys (Internet Explorer 8) widthContenArea = document.documentElement.clientWidth || document.body.clientWidth; // näkyvän näkymän korkeus (Internet Explorer 8) heightContenArea = document.documentElement.clientHeight || document.body.clientHeight; // näkyvän näkymän leveys (kaikki selaimet) widthContenArea1 = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth; // näkyvän näkymän korkeus (kaikki selaimet) heightContenArea1 = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight; document.getElementById("widthContenArea").innerHTML = leveysContenArea; document.getElementById("heightContenArea").innerHTML = korkeusContenArea;

outerWidth ja outerHeight ominaisuudet

Ne on suunniteltu saamaan koko selainikkunan mitat, ts. mukaan lukien työkalurivit, vierityspalkit, tilapalkki, ikkunan reunat jne. OuterWidth- ja outerHeight-ominaisuudet ovat vain luku -tilassa ja palauttavat ikkunan leveyden ja korkeuden pikseleinä.

Hanki esimerkiksi selainikkunan korkeus ja leveys:

Selainikkunan leveys (widthWindow):

Selainikkunan korkeus (heighWindow):

// selainikkunan leveys var widthWindow = window.outerWidth; // selainikkunan korkeus var heightWindow = window.outerHeight; document.getElementById("widthWindow").innerHTML = leveysikkuna; document.getElementById("heightWindow").innerHTML = korkeusikkuna;

screenLeft (screenX) ja screenTop (screenY) ominaisuudet

Ne on suunniteltu saamaan selainikkunan tai asiakirjan vasemman yläkulman koordinaatit suhteessa käyttäjän näytön vasempaan yläkulmaan.

Tässä tapauksessa screenLeft- ja screenTop-ominaisuudet toimivat Internet Explorerissa ja screenX- ja screenY-ominaisuudet toimivat Mozilia Firefoxissa. Chromessa, Safarissa ja muissa vastaavissa selaimissa voit käyttää sekä screenLeft- että screenTop-ominaisuuksia sekä screenX- ja screenY-ominaisuuksia.

Näitä ominaisuuksia käytettäessä on otettava huomioon, että jotkut selaimet voivat palauttaa asiakirjan vasemman yläkulman koordinaatin ja jotkut selaimet palauttaa ikkunan vasemman yläkulman koordinaatin. Näytön vasen (screenX) ja screenTop (screenY) ominaisuudet ovat vain luku -tilassa ja palauttavat vaaka- ja pystyetäisyydet suhteessa näytön vasempaan kulmaan pikseleinä, vastaavasti.

Esitetään esimerkiksi viestin muodossa nykyisen selainikkunan (asiakirjan) vasemman kulman x- ja y-koordinaatit suhteessa näytön vasempaan yläkulmaan:

funktio windowXY() ( // Käyttämällä screenleft- ja screenTop-ominaisuuksia saamme ikkunan (asiakirjan) sijainnin koordinaatit var winX = window.screenLeft; var winY = window.screenTop; // Ominaisuuksia screenX ja screenY käyttämällä saamme ikkunan (asiakirjan) sijainnin koordinaatit winX = ikkuna.ruutuX; winY = ikkuna.ruutuY // Hae ikkunan (asiakirjan) sijainnin koordinaatit kaikissa selaimissa winX = ikkuna.ruutuX ? ikkuna.ruutuX: ikkuna.ruutuLeft; winY = window.screenY ? window.screenY: window.screenTop ; window.alert ("Ikkunan koordinaatit suhteessa käyttäjän näyttöön: X = " + winX + ", Y = " + winY + "."); ) Ota selvää koordinaatit

ominaisuudet pageXOffset (scrollX) ja pageYOffset (scrollX)

Ne on suunniteltu keräämään pikselien määrä, jonka verran asiakirjaa on vieritetty vaaka- (pageXOffset) tai pystysuunnassa (pageYOffset) suhteessa ikkunan vasempaan yläkulmaan. ScrollX- ja scrollY-ominaisuudet vastaavat pageXOffset- ja pageYOffset-ominaisuuksia, vastaavasti. Nämä ominaisuudet ovat vain luku -tilassa.

Näytä viestissä esimerkiksi pikselien määrä, jolla asiakirjaa vieritettiin vaaka- (sivuXOffset) ja pystysuunnassa (pageYOffset).

function scrollContent() ( //Vieritä nykyistä asiakirjaa 200 kuvapistettä oikealle ja alas window.scrollBy(200,200); //Hae arvot pageXOffset- ja pageYOffset-ominaisuuksilla var winOffsetX = window.pageXOffset; var winOffsetY = window.pageYOffset ; //Hae arvot , joilla asiakirjaa vieritettiin vaaka- tai pystysuunnassa Internet Explorerissa: winOffsetX = document.documentElement.scrollLeft; winOffsetY = document.documentElement.scrollTop; //Kaikille selaimille: winOffsetX = window.pageXOffset || document .documentElement.scrollLeft; winOffsetY = window.pageYOffset || document.documentElement.scrollTop; alert ("Pikselien lukumäärä, joilla asiakirjaa vieritettiin vaaka- ja pystysuunnassa: X = " + winOffsetX + ", Y = " + winOffsetY + ". "); ) Selvitä vierityspalkkien sijainnit