För att skapa dynamiska och pixelperfekta webbsidesdesigner är mätningar av fönsterstorleken mycket viktiga att förstå och använda. Den önskade webbsidelayouten kanske inte genereras om mätningen av fönstret inte tas eller används korrekt. Tyvärr tillhandahöll HTML/CSS inga attribut eller egenskaper för att få korrekt kunskap om fönstrets skärmstorlek och fönstrets avstånd från de ursprungliga skärmgränserna.
Lyckligtvis! JavaScript löser det här problemet genom att tillhandahålla dess ' window.screenLeft” och “window.screenTop ' egenskaper för att mäta fönstrets position på både ' x' och 'y-axeln ' respektive. Vårt huvudfokus i denna artikel är att få en position längs X-axeln med hjälp av ' fönster.skärm Vänster ' fast egendom. Så, låt oss börja!
Den här bloggen kommer att förklara proceduren för att använda eller komma åt egenskapen window.screenLeft i JavaScript.
Hur får jag åtkomst till egenskapen “window.screenLeft” i JavaScript?
den ' fönster.skärm Vänster Egenskapen för JavaScript returnerar informationen relaterad till den horisontella positionen för ett fönster, i förhållande till skärmen. Den här egenskapen returnerar det numeriska värdet i pixelformat, som visar fönstrets horisontella avstånd från skärmen. Besök koden nedan, där ' fönster.skärm Vänster ” fastigheten används:
< kropp >
< h1 stil = 'färg: sjögrön;' > Linux < / h1 >
< sid id = 'mål' > < / sid >
< manus >
let i = window.screenLeft;
document.getElementById('target').innerHTML = 'Vänster: ' + i;
< / manus >
< / kropp >
Beskrivning av ovanstående kod:
- Först, HTML ' sid element skapas med ett id för ' mål ”.
- Därefter ' fönster.skärm Vänster '-egenskapen används i '< manus >' taggar och lagrar resultatet i variabeln ' i ”.
- Välj sedan elementet med id ' mål ’ och infoga värdet på ' i' variabel med ' innerHTML ' fast egendom.
Förhandsvisningen av webbsidan är som följer:
Utdata visar att det horisontella avståndet från den vänstra skärmgränsen är noll pixlar.
Exempel: Dynamiskt hämtning av det horisontella värdet
Egenskapen screenLeft kan användas tillsammans med ' ändra storlek ” händelseavlyssnare för att ge realtidspositionen för fönstret som motsvarar skärmen längs x-axeln. På samma sätt kan positionen längs y-axeln eller den vertikala axeln också hämtas genom att använda ' window.screenTop ' fast egendom. Låt oss ha en kod för det givna scenariot:
< kropp >< h1 stil = 'färg: sjögrön;' > Linuxhint < / h1 >
< sid id = 'testa' >< / sid >
< manus >
funktion dynamisk ( ) {
låt jag = window.screenLeft;
låt j = window.screenTop;
document.getElementById ( 'testa' ) .innerHTML = 'Position från vänster håll: ' + i + ', Från toppriktningen: ' + j;
}
window.addEventListener ( 'ändra storlek' , dynamisk ) ;
< / manus >
Förklaringen av ovanstående kod är följande:
- Först har det riktade elementet skapats med ett id på ' testa ”.
- Därefter visas '< manus >'-taggen används och ' dynamisk ()”-funktionen skapas i den.
- Inuti funktionen, använd ' window.screenLeft” och “window.screenTop ' egenskaper och lagra dem i ' i' och 'j ” respektive variabler.
- Efter det väljer du det inriktade elementet genom att få dess id ' testa ” och med hjälp av ” innerHTML ' egenskapen visar värdena för både ' i' och 'j ' variabler över webbsidan.
- Till slut, bifoga ' ändra storlek ' händelselyssnare med ' fönster ' som åberopar ' dynamisk ()”-funktionen varje gång fönsterstorleken ändras.
Förhandsgranskning av webbsidan efter slutet av kompileringen:
I ovanstående utdata tas fönsterskillnaden från den övre och vänstra sidan emot i pixlar när fönstret ändras.
Det handlar allt om ' window.screeLeft ” egendom i JavaScript.
Slutsats
För att komma åt ' fönster.skärm Vänster ' egenskapen i JavaScript och bifoga ' ändra storlek ' evenemangslyssnare till ' fönster ”. Detta anropar återuppringningsfunktionen varje gång storleken på fönstret ändras. Inuti den här funktionen skapar du en variabel som lagrar ' fönster.skärm Vänster ' fast egendom. Hämta dessutom referensen för det inriktade elementet och visa denna variabels värden över den. Den här bloggen har förklarat processen för att komma åt egenskapen window.screenLeft i JavaScript.