Om dynamische en pixel-perfecte webpagina-ontwerpen te creëren, zijn metingen van de venstergrootte van groot belang om te begrijpen en te gebruiken. De gewenste webpagina-indeling wordt mogelijk niet gegenereerd als de meting van het venster niet correct wordt uitgevoerd of gebruikt. Helaas bood HTML/CSS geen enkel attribuut of eigenschap om nauwkeurige kennis te krijgen over de schermgrootte van het venster en de afstand van het venster tot de oorspronkelijke schermgrenzen.
Gelukkig! JavaScript lost dit probleem op door de “ window.screenLeft” en “window.screenTop ” eigenschappen om de positie van het venster te meten op zowel de “ x” en “y-as ”respectievelijk. Onze belangrijkste focus in dit artikel is om een positie langs de X-as te krijgen met behulp van de “ window.screenLeft ' eigendom. Dus laten we beginnen!
In deze blog wordt de procedure uitgelegd voor het gebruiken of openen van de eigenschap window.screenLeft in JavaScript.
Hoe krijg ik toegang tot de eigenschap “window.screenLeft” in JavaScript?
De ' window.screenLeft De eigenschap van JavaScript retourneert de informatie met betrekking tot de horizontale positie van een venster ten opzichte van het scherm. Deze eigenschap retourneert de numerieke waarde in pixelformaat, waarbij de horizontale afstand van het venster tot het scherm wordt weergegeven. Bezoek de onderstaande code, waarin de “ window.screenLeft ” vastgoed wordt gebruikt:
< lichaam >
< h1 stijl = 'kleur: zeegroen;' > Linux < / h1 >
< P ID kaart = 'doel' > < / P >
< script >
laat i = window.screenLeft;
document.getElementById('target').innerHTML = 'Links: ' + i;
< / script >
< / lichaam >
Beschrijving van de bovenstaande code:
- Eerst de HTML “ P ”-element wordt gemaakt met de id “ doel ”.
- Vervolgens wordt de “ window.screenLeft ” eigenschap wordt gebruikt binnen de “< script >” tag en slaat het resultaat op in de variabele “ i ”.
- Selecteer vervolgens het element met de id “ doel ' en voer de waarde in van de “ i” variabele met behulp van de “ innerlijkeHTML ' eigendom.
Het voorbeeld van de webpagina is als volgt:
Uit de uitvoer blijkt dat de horizontale afstand vanaf de linkerschermrand nul pixels is.
Voorbeeld: dynamisch ophalen van de horizontale waarde
De eigenschap screenLeft kan samen met de “ formaat wijzigen ”gebeurtenislistener om de realtime positie van het venster weer te geven dat overeenkomt met het scherm langs de x-as. Op dezelfde manier kan de positie langs de y-as of verticale as ook worden opgehaald door gebruik te maken van de “ venster.screenTop ' eigendom. Laten we een code hebben voor het gegeven scenario:
< lichaam >< h1 stijl = 'kleur: zeegroen;' > Linuxhint < / h1 >
< P ID kaart = 'test' >< / P >
< script >
functie dynamisch ( ) {
laat ik = venster.screenLeft;
laat j = venster.screenTop;
document.getElementById ( 'test' ) .innerHTML = 'Positie vanuit linkerrichting:' + ik + ', Van bovenaf: ' +j;
}
window.addEventListener ( 'formaat wijzigen' , dynamisch ) ;
< / script >
De uitleg van de bovenstaande code is als volgt:
- Ten eerste is het beoogde element gemaakt met de id “ test ”.
- Vervolgens wordt de “< script >”tag wordt gebruikt, en de “ dynamisch ()”-functie wordt erin gemaakt.
- Gebruik binnen de functie de “ window.screenLeft” en “window.screenTop ” eigenschappen en sla ze op in “ ik” en “j ”variabelen respectievelijk.
- Selecteer daarna het beoogde element door de id op te halen “ test ' en met de hulp van ' innerlijkeHTML ” eigenschap toont de waarden voor beide “ ik” en “j 'variabelen over de webpagina.
- Bevestig uiteindelijk de “ formaat wijzigen ”gebeurtenislistener met de “ raam ' dat een beroep doet op de ' dynamisch ()”-functie telkens wanneer de venstergrootte wordt gewijzigd.
Voorbeeld van de webpagina na het einde van de compilatie:
In de bovenstaande uitvoer wordt het vensterverschil tussen de boven- en linkerkant in pixels ontvangen naarmate het formaat van het venster wordt gewijzigd.
Dat gaat allemaal over de “ window.screeLeft ”eigenschap in JavaScript.
Conclusie
Om toegang te krijgen tot de “ window.screenLeft ” in JavaScript en voeg de “ formaat wijzigen 'gebeurtenislistener naar' raam ”. Hierdoor wordt de callback-functie aangeroepen telkens wanneer de grootte van het venster wordt gewijzigd. Maak binnen deze functie een variabele die de “ window.screenLeft ' eigendom. Haal bovendien de referentie van het beoogde element op en geef de waarden van deze variabele erover weer. In deze blog wordt het proces uitgelegd om toegang te krijgen tot de eigenschap window.screenLeft in JavaScript.