Dünaamiliste ja pikslitega täiuslike veebilehtede kujunduste loomiseks on akna suuruse mõõtmine väga oluline mõista ja kasutada. Soovitud veebilehe paigutust ei pruugita luua, kui akna mõõte ei võeta ega kasutata õigesti. Kahjuks ei andnud HTML/CSS ühtegi atribuuti ega omadust, et saada täpseid teadmisi akna ekraani suuruse ja akna kauguse kohta algsetest ekraanipiiridest.
Õnneks! JavaScript lahendab selle probleemi, pakkudes oma ' window.screenLeft” ja „window.screenTop ” atribuudid, et mõõta akna asukohta mõlemal x” ja „y-telg ” vastavalt. Meie põhirõhk selles artiklis on positsiooni leidmine piki X-telge, kasutades ' aken.ekraanVasak ” vara. Niisiis, alustame!
See ajaveeb selgitab JavaScriptis atribuudi window.screenLeft kasutamise või juurdepääsu protseduuri.
Kuidas pääseda juurde JavaScriptis atribuudile „window.screenLeft”?
' aken.ekraanVasak ” JavaScripti atribuut tagastab teabe, mis on seotud akna horisontaalse asendiga ekraani suhtes. See omadus tagastab arvväärtuse pikslivormingus, näidates akna horisontaalset kaugust ekraanist. Külastage allolevat koodi, milles ' aken.ekraanVasak ” vara on kasutusel:
< keha >
< h1 stiilis = 'värv: mereroheline;' > Linux < / h1 >
< lk id = 'sihtmärk' > < / lk >
< stsenaarium >
let i = aken.ekraanVasak;
document.getElementById('target').innerHTML = 'Vasakule: ' + i;
< / stsenaarium >
< / keha >
Ülaltoodud koodi kirjeldus:
- Esiteks, HTML ' lk ' element luuakse ID-ga ' sihtmärk ”.
- Järgmiseks ' aken.ekraanVasak ' atribuuti kasutatakse '< stsenaarium >' sildi ja salvestab tulemuse muutujas ' i ”.
- Seejärel valige element ID-ga ' sihtmärk ja sisestage väärtus “ i' muutuja kasutades ' sisemine HTML ” vara.
Veebilehe eelvaade on järgmine:
Väljund näitab, et horisontaalne kaugus ekraani vasakpoolsest piirist on null pikslit.
Näide: Horisontaalse väärtuse dünaamiline toomine
Atribuuti screenLeft saab kasutada koos „ suurust muutma ” sündmustekuulaja, et anda ekraanile vastava akna reaalajas asukoht piki x-telge. Samal viisil saab asukoha piki y-telge või vertikaaltelge leida ka kasutades ' aken.ekraanÜlemine ” vara. Anname antud stsenaariumi jaoks koodi:
< keha >< h1 stiilis = 'värv: mereroheline;' > Linuxi vihje < / h1 >
< lk id = 'test' >< / lk >
< stsenaarium >
funktsiooni dünaamiline ( ) {
las ma = aken.ekraanVasak;
las j = window.screenTop;
document.getElementById ( 'test' ) .innerHTML = 'Asend vasakult suunalt:' + i + ', Ülemisest suunast: ' + j;
}
window.addEventListener ( 'suurust muutma' , dünaamiline ) ;
< / stsenaarium >
Ülaltoodud koodi selgitus on järgmine:
- Esiteks on sihitud element loodud ID-ga ' katsetada ”.
- Järgmisena kuvatakse „< stsenaarium >“ kasutatakse silti ja „ dünaamiline ()” funktsioon luuakse selles.
- Kasutage funktsiooni sees ' window.screenLeft” ja „window.screenTop ' atribuudid ja salvestage need ' i” ja „j ” muutujad.
- Pärast seda valige sihitud element, hankides selle ID ' katsetada ' ja abiga ' sisemine HTML ' atribuut kuvab mõlema ' väärtused i” ja „j ” muutujad veebilehel.
- Lõpuks lisage ' suurust muutma ' sündmuste kuulaja koos ' aken ', mis kutsub esile ' dünaamiline ()” funktsiooni iga kord, kui akna suurust muudetakse.
Veebilehe eelvaade pärast koostamise lõppu:
Ülaltoodud väljundis võetakse akna suuruse muutmisel vastu akna erinevus ülemisest ja vasakust servast pikslites.
See kõik puudutab ' aken.screeLeft ” atribuut JavaScriptis.
Järeldus
Juurdepääs ' aken.ekraanVasak ' atribuut JavaScriptis ja lisage ' suurust muutma ' sündmuste kuulaja ' aken ”. See käivitab tagasihelistamise funktsiooni iga kord, kui akna suurust muudetakse. Selle funktsiooni sees looge muutuja, mis salvestab ' aken.ekraanVasak ” vara. Lisaks hankige sihitud elemendi viide ja kuvage selle muutuja väärtused. See ajaveeb on selgitanud JavaScripti atribuudile window.screenLeft juurdepääsu protsessi.