Za ustvarjanje dinamičnih in slikovnih pik popolnih dizajnov spletnih strani so meritve velikosti okna zelo pomembne za razumevanje in uporabo. Želena postavitev spletne strani morda ne bo ustvarjena, če meritev okna ni izvedena ali uporabljena pravilno. Na žalost HTML/CSS ni ponudil nobenega atributa ali lastnosti za pridobitev natančnega znanja o velikosti zaslona okna in oddaljenosti okna od prvotnih meja zaslona.
Na srečo! JavaScript rešuje to težavo tako, da zagotovi svoj » window.screenLeft' in 'window.screenTop ' za merjenje položaja okna tako na ' x' in 'y-os « oz. Naš glavni poudarek v tem članku je pridobiti položaj vzdolž osi X s pomočjo ' window.screenLeft ” lastnina. Torej, začnimo!
Ta blog bo razložil postopek za uporabo ali dostop do lastnosti window.screenLeft v JavaScriptu.
Kako dostopati do lastnosti »window.screenLeft« v JavaScriptu?
' window.screenLeft ” Lastnost JavaScript vrne informacije, povezane z vodoravnim položajem okna glede na zaslon. Ta lastnost vrne številsko vrednost v slikovnih pikah, ki prikazuje vodoravno razdaljo okna od zaslona. Obiščite spodnjo kodo, v kateri je » window.screenLeft ” nepremičnina se uporablja:
< telo >
< h1 stil = 'barva: morsko zelena;' > Linux < / h1 >
< str id = 'tarča' > < / str >
< scenarij >
naj i = window.screenLeft;
document.getElementById('target').innerHTML = 'Levo: ' + i;
< / scenarij >
< / telo >
Opis zgornje kode:
- Najprej HTML ' str ' element je ustvarjen z ID-jem ' tarča ”.
- Nato je ' window.screenLeft ” lastnost se uporablja znotraj “< scenarij >” in shrani rezultat v spremenljivko “ jaz ”.
- Nato izberite element z ID-jem ' tarča « in vstavite vrednost “ i' spremenljivko z uporabo ' notranjiHTML ” lastnina.
Predogled spletne strani je naslednji:
Izhod kaže, da je vodoravna razdalja od leve meje zaslona nič slikovnih pik.
Primer: dinamično pridobivanje vodoravne vrednosti
Lastnost screenLeft lahko uporabite skupaj z ' spremenite velikost ” poslušalec dogodkov za zagotavljanje položaja okna v realnem času, ki ustreza zaslonu vzdolž osi x. Na enak način lahko položaj vzdolž y-osi ali navpične osi pridobite tudi z uporabo ' window.screenTop ” lastnina. Imejmo kodo za dani scenarij:
< telo >< h1 stil = 'barva: morsko zelena;' > Linuxhint < / h1 >
< str id = 'test' >< / str >
< scenarij >
dinamično delovanje ( ) {
naj = window.screenLeft;
naj j = window.screenTop;
document.getElementById ( 'test' ) .innerHTML = 'Položaj z leve smeri: ' + jaz + ', Od zgoraj: ' + j;
}
window.addEventListener ( 'spremeni velikost' , dinamično ) ;
< / scenarij >
Razlaga zgornje kode je naslednja:
- Najprej je bil ustvarjen ciljni element z ID-jem ' test ”.
- Nato je »< scenarij >« se uporablja oznaka in » dinamično ()« je v njej ustvarjena funkcija.
- Znotraj funkcije uporabite » window.screenLeft' in 'window.screenTop ' in jih shranite v ' i« in »j ” spremenljivke oz.
- Po tem izberite ciljni element tako, da pridobite njegov ID ' test « in s pomočjo » notranjiHTML lastnost prikaže vrednosti za oba i« in »j ” spremenljivk na spletni strani.
- Na koncu priložite ' spremenite velikost » poslušalec dogodkov z » okno «, ki prikliče » dinamično ()« vsakič, ko se spremeni velikost okna.
Predogled spletne strani po koncu prevajanja:
V zgornjem izhodu je razlika okna od zgornje in leve strani prejeta v slikovnih pikah, ko se velikost okna spremeni.
To je vse o ' window.screeLeft ” v JavaScriptu.
Zaključek
Za dostop do » window.screenLeft ' v JavaScriptu in priložite ' spremenite velikost »poslušalec dogodkov« okno ”. To prikliče funkcijo povratnega klica vsakič, ko se velikost okna spremeni. Znotraj te funkcije ustvarite spremenljivko, ki shrani ' window.screenLeft ” lastnina. Poleg tega pridobite referenco ciljnega elementa in prikažite vrednosti te spremenljivke nad njim. Ta blog je razložil postopek za dostop do lastnosti window.screenLeft v JavaScriptu.