For at skabe dynamiske og pixel-perfekte websidedesign er målinger af vinduesstørrelsen meget kritiske at forstå og bruge. Det ønskede websidelayout genereres muligvis ikke, hvis målingen af vinduet ikke tages eller bruges korrekt. Desværre leverede HTML/CSS ikke nogen egenskab eller egenskab for at få nøjagtig viden om vinduets skærmstørrelse og vinduets afstand fra de oprindelige skærmgrænser.
Heldigvis! JavaScript løser dette problem ved at give sin ' window.screenLeft” og “window.screenTop ' egenskaber til at måle vinduets position på både ' x' og 'y-aksen ' henholdsvis. Vores hovedfokus i denne artikel er at få en position langs X-aksen ved hjælp af ' vindue.skærm Venstre ” ejendom. Så lad os starte!
Denne blog vil forklare proceduren for at bruge eller få adgang til egenskaben window.screenLeft i JavaScript.
Hvordan får man adgang til egenskaben 'window.screenLeft' i JavaScript?
Det ' vindue.skærm Venstre ” JavaScript-egenskaben returnerer informationen relateret til den vandrette position af et vindue i forhold til skærmen. Denne egenskab returnerer den numeriske værdi i pixelformat, der viser vinduets vandrette afstand fra skærmen. Besøg nedenstående kode, hvor ' vindue.skærm Venstre ” Ejendommen bliver brugt:
< legeme >
< h1 stil = 'farve: havgrøn;' > Linux < / h1 >
< s id = 'mål' > < / s >
< manuskript >
lad i = vindue.skærmVenstre;
document.getElementById('target').innerHTML = 'Venstre: ' + i;
< / manuskript >
< / legeme >
Beskrivelse af ovenstående kode:
- Først HTML ' s element er oprettet med et id på ' mål ”.
- Dernæst ' vindue.skærm Venstre ' egenskaben bruges inde i '< manuskript >' tag og gemmer resultatet i variablen ' jeg ”.
- Vælg derefter elementet med et id på ' mål ’ og indsæt værdien af “ i' variabel ved hjælp af ' indreHTML ” ejendom.
Forhåndsvisningen af websiden er som følger:
Outputtet viser, at den vandrette afstand fra venstre skærmgrænse er nul pixels.
Eksempel: Dynamisk hentning af den vandrette værdi
Egenskaben screenLeft kan bruges sammen med ' ændre størrelse ” hændelseslytter for at give vinduets position i realtid svarende til skærmen langs x-aksen. På samme måde kan positionen langs y-aksen eller den lodrette akse også hentes ved at bruge ' vindue.skærmTop ” ejendom. Lad os få en kode til det givne scenarie:
< legeme >< h1 stil = 'farve: havgrøn;' > Linuxhint < / h1 >
< s id = 'prøve' >< / s >
< manuskript >
funktion dynamisk ( ) {
lad jeg = window.screenLeft;
lad j = window.screenTop;
document.getElementById ( 'prøve' ) .innerHTML = 'Position fra venstre retning: ' + i + ', Fra topretning: ' + j;
}
window.addEventListener ( 'ændre størrelse' , dynamisk ) ;
< / manuskript >
Forklaringen af ovenstående kode er som følger:
- Først er det målrettede element blevet oprettet med et id på ' prøve ”.
- Dernæst '< manuskript >' tag bruges, og ' dynamisk ()'-funktionen oprettes i den.
- Inde i funktionen skal du bruge ' window.screenLeft” og “window.screenTop 'ejendomme og gem dem i ' i' og 'j ” variabler hhv.
- Vælg derefter det målrettede element ved at få dets id ' prøve ” og ved hjælp af ” indreHTML egenskaben viser værdierne for begge ' i' og 'j ” variabler over websiden.
- Til sidst skal du vedhæfte ' ændre størrelse ' begivenhedslytter med ' vindue ', der påberåber sig ' dynamisk ()”-funktion, hver gang vinduesstørrelsen ændres.
Forhåndsvisning af websiden efter afslutningen af kompileringen:
I ovenstående output modtages vinduesforskellen fra den øverste og venstre side i pixels, efterhånden som vinduet ændres.
Det handler alt om ' window.screeLeft ” ejendom i JavaScript.
Konklusion
For at få adgang til ' vindue.skærm Venstre ' egenskab i JavaScript og vedhæft ' ændre størrelse ' begivenhed lytter til ' vindue ”. Dette aktiverer tilbagekaldsfunktionen, hver gang størrelsen på vinduet ændres. Inde i denne funktion skal du oprette en variabel, der gemmer ' vindue.skærm Venstre ” ejendom. Hent desuden referencen for det målrettede element og vis denne variabels værdier over det. Denne blog har forklaret processen for at få adgang til egenskaben window.screenLeft i JavaScript.