Dynaamisten ja pikselin täydellisten web-sivujen luomiseksi ikkunan koon mittaukset ovat erittäin tärkeitä ymmärtää ja käyttää. Haluttua verkkosivun ulkoasua ei välttämättä luoda, jos ikkunan mittaa ei ole otettu tai käytetty oikein. Valitettavasti HTML/CSS ei tarjonnut mitään attribuuttia tai ominaisuutta saadakseen tarkkoja tietoja ikkunan näytön koosta ja ikkunan etäisyydestä alkuperäisen näytön rajoista.
Onneksi! JavaScript ratkaisee tämän ongelman antamalla sen ' window.screenLeft' ja 'window.screenTop '-ominaisuudet mittaamaan ikkunan sijaintia sekä ' x' ja 'y-akseli ' vastaavasti. Päätavoitteemme tässä artikkelissa on saada sijainti X-akselia pitkin ' window.screenLeft ” omaisuutta. Joten, aloitetaan!
Tässä blogissa kerrotaan, miten JavaScriptin window.screenLeft-ominaisuutta käytetään.
Miten päästään 'window.screenLeft' -ominaisuuteen JavaScriptissä?
' window.screenLeft ” JavaScriptin ominaisuus palauttaa tiedot, jotka liittyvät ikkunan vaakasuoraan sijaintiin suhteessa näyttöön. Tämä ominaisuus palauttaa numeerisen arvon pikselimuodossa ja näyttää ikkunan vaakaetäisyyden näytöstä. Käy alla olevassa koodissa, jossa ' window.screenLeft ”kiinteistö on käytössä:
< kehon >
< h1 tyyli = 'väri: merenvihreä;' > Linux < / h1 >
< s id = 'kohde' > < / s >
< käsikirjoitus >
anna i = window.screenLeft;
document.getElementById('target').innerHTML = 'Vasen: ' + i;
< / käsikirjoitus >
< / kehon >
Kuvaus yllä olevasta koodista:
- Ensinnäkin HTML ' s ' elementti luodaan tunnuksella ' kohde ”.
- Seuraavaksi ' window.screenLeft '-ominaisuutta käytetään '< käsikirjoitus >' -tunnisteen ja tallentaa tuloksen muuttujaan ' i ”.
- Valitse sitten elementti, jonka tunnus on ' kohde ja lisää arvo ' i' muuttuja käyttämällä ' innerHTML ” omaisuutta.
Verkkosivun esikatselu on seuraava:
Tulos näyttää, että vaakaetäisyys näytön vasemmasta reunasta on nolla pikseliä.
Esimerkki: Vaaka-arvon dynaaminen haku
Ominaisuutta screenLeft voidaan käyttää yhdessä ' muuttaa kokoa ”-tapahtuman kuuntelija, joka tarjoaa näyttöä vastaavan ikkunan reaaliaikaisen sijainnin x-akselilla. Samalla tavalla sijainti y-akselilla tai pystyakselilla voidaan hakea myös käyttämällä ' window.screenTop ” omaisuutta. Otetaan koodi annetulle skenaariolle:
< kehon >< h1 tyyli = 'väri: merenvihreä;' > Linuxvinkki < / h1 >
< s id = 'testata' >< / s >
< käsikirjoitus >
funktion dynaaminen ( ) {
Anna minun = window.screen Vasen;
anna j = window.screenTop;
document.getElementById ( 'testata' ) .innerHTML = 'Sijainti vasemmasta suunnasta: ' + minä + ', Yläsuunnasta: ' + j;
}
window.addEventListener ( 'muuta kokoa' , dynaaminen ) ;
< / käsikirjoitus >
Yllä olevan koodin selitys on seuraava:
- Ensinnäkin kohdistettu elementti on luotu, jonka tunnus on ' testata ”.
- Seuraavaksi '< käsikirjoitus >' -tunnistetta käytetään ja ' dynaaminen ()” -toiminto luodaan siihen.
- Käytä toiminnon sisällä ' window.screenLeft' ja 'window.screenTop '-ominaisuudet ja tallenna ne ' i' ja 'j ” muuttujia vastaavasti.
- Valitse sen jälkeen kohdeelementti hankkimalla sen tunnus ' testata ' ja '' innerHTML ' ominaisuus näyttää arvot molemmille ' i' ja 'j ”-muuttujia verkkosivulla.
- Liitä lopuksi ' muuttaa kokoa 'tapahtuman kuuntelija ' ikkuna ', joka kutsuu ' dynaaminen ()”-toiminto aina, kun ikkunan kokoa muutetaan.
Verkkosivun esikatselu kokoamisen päätyttyä:
Yllä olevassa lähdössä ikkunan ero ylä- ja vasemmasta reunasta vastaanotetaan pikseleinä, kun ikkunan kokoa muutetaan.
Siinä kaikki ' window.screeLeft ”-ominaisuus JavaScriptissä.
Johtopäätös
Päästäksesi ' window.screenLeft ' -ominaisuus JavaScriptissä ja liitä ' muuttaa kokoa 'tapahtuman kuuntelija' ikkuna ”. Tämä käynnistää takaisinsoittotoiminnon aina, kun ikkunan kokoa muutetaan. Luo tämän funktion sisällä muuttuja, joka tallentaa ' window.screenLeft ” omaisuutta. Lisäksi hae kohdeelementin viite ja näytä tämän muuttujan arvot sen päällä. Tässä blogissa on selitetty prosessi, jolla pääset JavaScriptin window.screenLeft-ominaisuuteen.