For å lage dynamiske og pikselperfekte nettsidedesign, er målinger av vindusstørrelsen svært viktige å forstå og bruke. Det kan hende at ønsket nettsideoppsett ikke genereres hvis målingen av vinduet ikke er tatt eller brukt riktig. Dessverre ga HTML/CSS ingen attributter eller egenskaper for å få nøyaktig kunnskap om vinduets skjermstørrelse og avstanden til vinduet fra de opprinnelige skjermgrensene.
Heldigvis! JavaScript løser dette problemet ved å oppgi ' window.screenLeft” og “window.screenTop ' egenskaper for å måle posisjonen til vinduet på både ' x' og 'y-aksen 'henholdsvis. Vårt hovedfokus i denne artikkelen er å få en posisjon langs X-aksen ved hjelp av ' vindu.skjerm Venstre ' eiendom. Så la oss starte!
Denne bloggen vil forklare prosedyren for å bruke eller få tilgang til egenskapen window.screenLeft i JavaScript.
Hvordan få tilgang til 'window.screenLeft'-egenskapen i JavaScript?
« vindu.skjerm Venstre ” egenskapen til JavaScript returnerer informasjonen relatert til den horisontale plasseringen av et vindu, i forhold til skjermen. Denne egenskapen returnerer den numeriske verdien i pikselformat, og viser den horisontale avstanden mellom vinduet og skjermen. Besøk koden nedenfor, der ' vindu.skjerm Venstre « eiendommen blir brukt:
< kropp >
< h1 stil = 'farge: sjøgrønn;' > Linux < / h1 >
< s id = 'mål' > < / s >
< manus >
la i = window.screenLeft;
document.getElementById('target').innerHTML = 'Venstre: ' + i;
< / manus >
< / kropp >
Beskrivelse av koden ovenfor:
- Først HTML ' s element er opprettet med en id på ' mål '.
- Deretter ' vindu.skjerm Venstre '-egenskapen brukes i '< manus >' tag og lagrer resultatet i variabelen ' Jeg '.
- Deretter velger du elementet med en id på ' mål ’ og sett inn verdien av ' i' variabel ved å bruke ' indreHTML ' eiendom.
Forhåndsvisningen av nettsiden er som følger:
Utgangen viser at den horisontale avstanden fra venstre skjermgrense er null piksler.
Eksempel: Dynamisk henting av den horisontale verdien
ScreenLeft-egenskapen kan brukes sammen med ' endre størrelse ” hendelseslytter for å gi sanntidsposisjonen til vinduet som tilsvarer skjermen langs x-aksen. På samme måte kan posisjonen langs y-aksen eller vertikalaksen også hentes frem ved å bruke ' vindu.skjermTopp ' eiendom. La oss ha en kode for det gitte scenariet:
< kropp >< h1 stil = 'farge: sjøgrønn;' > Linuxhint < / h1 >
< s id = 'test' >< / s >
< manus >
funksjon dynamisk ( ) {
la meg = window.screenLeft;
la j = window.screenTop;
document.getElementById ( 'test' ) .innerHTML = 'Posisjon fra venstre retning: ' + i + ', Fra toppretningen: ' + j;
}
window.addEventListener ( 'endre størrelse' , dynamisk ) ;
< / manus >
Forklaringen av koden ovenfor er som følger:
- Først har det målrettede elementet blitt opprettet med en ID på ' test '.
- Deretter vises «< manus >'-taggen brukes, og ' dynamisk ()»-funksjonen er opprettet i den.
- Inne i funksjonen, bruk ' window.screenLeft” og “window.screenTop ' eiendommer og lagre dem i ' i' og 'j henholdsvis 'variabler.
- Deretter velger du det målrettede elementet ved å få ID-en ' test ' og ved hjelp av ' indreHTML ' egenskap viser verdiene for både ' i' og 'j variabler over nettsiden.
- Til slutt legger du ved ' endre størrelse ' hendelseslytter med ' vindu ' som påkaller ' dynamisk ()»-funksjonen hver gang vindusstørrelsen endres.
Forhåndsvisning av nettsiden etter slutten av kompileringen:
I utgangen ovenfor mottas vindusforskjellen fra toppen og venstre side i piksler etter hvert som vinduet endres.
Det handler om ' window.screeLeft ' eiendom i JavaScript.
Konklusjon
For å få tilgang til ' vindu.skjerm Venstre ' egenskap i JavaScript og legg ved ' endre størrelse ' hendelseslytter til ' vindu '. Dette aktiverer tilbakeringingsfunksjonen hver gang størrelsen på vinduet endres. Inne i denne funksjonen oppretter du en variabel som lagrer ' vindu.skjerm Venstre ' eiendom. Hent dessuten referansen til det målrettede elementet og vis denne variabelens verdier over den. Denne bloggen har forklart prosessen for å få tilgang til egenskapen window.screenLeft i JavaScript.