Upang lumikha ng mga dynamic at perpektong pixel na disenyo ng web page, ang mga sukat ng laki ng window ay napakahalagang maunawaan at gamitin. Ang nais na layout ng web page ay maaaring hindi mabuo kung ang pagsukat ng window ay hindi kinuha o ginamit nang tama. Sa kasamaang palad, ang HTML/CSS ay hindi nagbigay ng anumang katangian o pag-aari upang makakuha ng tumpak na kaalaman tungkol sa laki ng screen ng Window at ang distansya ng window mula sa orihinal na mga hangganan ng screen.
Sa kabutihang palad! Niresolba ng JavaScript ang isyung ito sa pamamagitan ng pagbibigay nito ' window.screenLeft' at 'window.screenTop ” properties para sukatin ang posisyon ng window sa parehong “ x' at 'y-axis ” ayon sa pagkakabanggit. Ang aming pangunahing pokus sa artikulong ito ay upang makakuha ng isang posisyon sa kahabaan ng X-axis sa tulong ng ' window.screenLeft ” ari-arian. Kaya, magsimula tayo!
Ipapaliwanag ng blog na ito ang pamamaraan sa paggamit o pag-access sa window.screenLeft property sa JavaScript.
Paano i-access ang 'window.screenLeft' Property sa JavaScript?
Ang ' window.screenLeft ” property ng JavaScript ay nagbabalik ng impormasyong nauugnay sa pahalang na posisyon ng isang window, na nauugnay sa screen. Ibinabalik ng property na ito ang numeric na halaga sa pixel format, na nagpapakita ng pahalang na distansya ng window mula sa screen. Bisitahin ang code sa ibaba, kung saan ang ' window.screenLeft 'Ang ari-arian ay ginagamit:
< katawan >
< h1 istilo = 'kulay: seagreen;' > Linux < / h1 >
< p id = 'target' > < / p >
< iskrip >
let i = window.screenLeft;
document.getElementById('target').innerHTML = 'Kaliwa: ' + i;
< / iskrip >
< / katawan >
Paglalarawan ng code sa itaas:
- Una, ang HTML ' p 'Ang elemento ay nilikha gamit ang isang id ng ' target ”.
- Susunod, ang ' window.screenLeft Ang ” property ay ginagamit sa loob ng “< iskrip >” tag at iniimbak ang resulta sa variable na “ i ”.
- Pagkatapos, piliin ang elementong may id ng “ target ' at ipasok ang halaga ng “ i” variable gamit ang “ panloobHTML ” ari-arian.
Ang preview ng webpage ay ang mga sumusunod:
Ipinapakita ng output na ang pahalang na distansya mula sa kaliwang hangganan ng screen ay zero pixels.
Halimbawa: Dynamically Retrieving the Horizontal Value
Maaaring gamitin ang screenLeft property kasama ng ' baguhin ang laki ” event listener upang ibigay ang real-time na posisyon ng window na tumutugma sa screen sa kahabaan ng x-axis. Sa parehong paraan, ang posisyon sa kahabaan ng y-axis o vertical axis ay maaari ding makuha sa pamamagitan ng paggamit ng ' window.screenTop ” ari-arian. Magkaroon tayo ng code para sa ibinigay na senaryo:
< katawan >< h1 istilo = 'kulay: seagreen;' > Linuxhint < / h1 >
< p id = 'pagsusulit' >< / p >
< iskrip >
dynamic na function ( ) {
hayaan mo ako = window.screenLeft;
hayaan si j = window.screenTop;
document.getElementById ( 'pagsusulit' ) .innerHTML = 'Posisyon mula sa Kaliwang Direksyon: ' + ako + ', Mula sa Nangungunang Direksyon: ' + j;
}
window.addEventListener ( 'baguhin ang laki' , dynamic ) ;
< / iskrip >
Ang paliwanag ng code sa itaas ay ang mga sumusunod:
- Una, ang naka-target na elemento ay nilikha na mayroong isang id ng ' pagsusulit ”.
- Susunod, ang '< iskrip >” tag ay ginagamit, at ang “ pabago-bago ()” function ay nilikha sa loob nito.
- Sa loob ng function, gamitin ang ' window.screenLeft' at 'window.screenTop ” mga ari-arian at iimbak ang mga ito sa “ ako' at 'j ” mga variable ayon sa pagkakabanggit.
- Pagkatapos nito, piliin ang naka-target na elemento sa pamamagitan ng pagkuha ng id nito ' pagsusulit 'at sa tulong ng' panloobHTML Ipinapakita ng ” property ang mga halaga para sa parehong “ ako' at 'j ” mga variable sa webpage.
- Sa huli, ikabit ang ' baguhin ang laki 'tagapakinig ng kaganapan na may ' bintana 'na humihiling sa' pabago-bago ()” function sa tuwing nagbabago ang laki ng window.
Preview ng webpage pagkatapos ng pagtatapos ng compilation:
Sa output sa itaas, ang pagkakaiba ng window mula sa itaas at kaliwang bahagi ay natatanggap sa mga pixel habang binabago ang laki ng window.
Iyon ay tungkol sa ' window.screeLeft ” property sa JavaScript.
Konklusyon
Upang ma-access ang ' window.screenLeft ” property sa JavaScript at ilakip ang “ baguhin ang laki 'tagapakinig ng kaganapan sa ' bintana ”. Invokes nito ang callback function sa tuwing babaguhin ang laki ng window. Sa loob ng function na ito, lumikha ng isang variable na nag-iimbak ng ' window.screenLeft ” ari-arian. Bukod dito, kunin ang reference ng naka-target na elemento at ipakita ang mga value ng variable na ito sa ibabaw nito. Ipinaliwanag ng blog na ito ang proseso upang ma-access ang window.screenLeft property sa JavaScript.