Um dynamische und pixelgenaue Webseitendesigns zu erstellen, ist es sehr wichtig, die Messung der Fenstergröße zu verstehen und zu verwenden. Das gewünschte Webseitenlayout wird möglicherweise nicht generiert, wenn die Messung des Fensters nicht korrekt durchgeführt oder verwendet wird. Leider stellt HTML/CSS keine Attribute oder Eigenschaften bereit, um genaue Informationen über die Bildschirmgröße des Fensters und den Abstand des Fensters von den ursprünglichen Bildschirmrändern zu erhalten.
Glücklicherweise! JavaScript löst dieses Problem, indem es „ window.screenLeft“ und „window.screenTop ” Eigenschaften zum Messen der Position des Fensters auf beiden „ x“ und „y-Achse“. ' jeweils. Unser Hauptaugenmerk in diesem Artikel liegt darauf, mit Hilfe des „ window.screenLeft ' Eigentum. So lass uns anfangen!
In diesem Blog wird das Verfahren zur Verwendung oder zum Zugriff auf die Eigenschaft window.screenLeft in JavaScript erläutert.
Wie greife ich in JavaScript auf die Eigenschaft „window.screenLeft“ zu?
Der ' window.screenLeft Die Eigenschaft „JavaScript“ gibt Informationen zur horizontalen Position eines Fensters relativ zum Bildschirm zurück. Diese Eigenschaft gibt den numerischen Wert im Pixelformat zurück und zeigt den horizontalen Abstand des Fensters vom Bildschirm an. Besuchen Sie den folgenden Code, in dem „ window.screenLeft „Grundstück wird genutzt:
< Körper >
< h1 Stil = „Farbe: Seegrün;“ > Linux < / h1 >
< P Ausweis = 'Ziel' > < / P >
< Skript >
let i = window.screenLeft;
document.getElementById('target').innerHTML = 'Left: ' + i;
< / Skript >
< / Körper >
Beschreibung des obigen Codes:
- Zuerst das HTML „ P Das Element wird mit der ID „ erstellt. Ziel “.
- Als nächstes wird das „ window.screenLeft Die Eigenschaft wird innerhalb der Eigenschaft „<“ verwendet Skript >“-Tag und speichert das Ergebnis in der Variablen „ ich “.
- Wählen Sie dann das Element mit der ID „ Ziel ’ und fügen Sie den Wert ein „ i“-Variable mit dem „ innerHTML ' Eigentum.
Die Vorschau der Webseite sieht wie folgt aus:
Die Ausgabe zeigt, dass der horizontale Abstand von der linken Bildschirmgrenze null Pixel beträgt.
Beispiel: Dynamisches Abrufen des horizontalen Werts
Die screenLeft-Eigenschaft kann zusammen mit der „ Größe ändern ”-Ereignis-Listener, um die Echtzeitposition des Fensters bereitzustellen, das dem Bildschirm entlang der x-Achse entspricht. Auf die gleiche Weise kann die Position entlang der y-Achse oder der vertikalen Achse auch mithilfe der Funktion „ window.screenTop ' Eigentum. Lassen Sie uns einen Code für das gegebene Szenario haben:
< Körper >< h1 Stil = „Farbe: Seegrün;“ > Linuxhint < / h1 >
< P Ausweis = 'prüfen' >< / P >
< Skript >
Funktion dynamisch ( ) {
Lass mich = window.screenLeft;
lass j = window.screenTop;
document.getElementById ( 'prüfen' ) .innerHTML = „Position von links:“ + ich + ', Von oben: ' + j;
}
window.addEventListener ( 'Größe ändern' , dynamisch ) ;
< / Skript >
Die Erklärung des obigen Codes lautet wie folgt:
- Zunächst wurde das Zielelement mit der ID „ prüfen “.
- Als nächstes wird das „< Skript >“-Tag wird verwendet und das „ dynamisch ()“ wird darin erstellt.
- Verwenden Sie innerhalb der Funktion das „ window.screenLeft“ und „window.screenTop ”-Eigenschaften und speichern Sie sie in „ i“ und „j ” Variablen bzw.
- Wählen Sie anschließend das Zielelement aus, indem Sie dessen ID abrufen. prüfen “ und mit Hilfe der „ innerHTML „Eigenschaft zeigt die Werte für beide an“ i“ und „j ”Variablen über die Webseite.
- Fügen Sie am Ende das „ Größe ändern ”-Ereignis-Listener mit dem „ Fenster “, das die „aufruft“ dynamisch ()“-Funktion jedes Mal, wenn die Fenstergröße geändert wird.
Vorschau der Webseite nach Abschluss der Kompilierung:
In der obigen Ausgabe wird der Fensterunterschied zwischen der oberen und der linken Seite in Pixel empfangen, wenn die Fenstergröße geändert wird.
Hier dreht sich alles um „ window.screeLeft ”-Eigenschaft in JavaScript.
Abschluss
Um auf „ window.screenLeft ”-Eigenschaft in JavaScript und hängen Sie die „ Größe ändern „Ereignis-Listener für“ Fenster “. Dadurch wird die Rückruffunktion jedes Mal aufgerufen, wenn die Größe des Fensters geändert wird. Erstellen Sie innerhalb dieser Funktion eine Variable, die „ window.screenLeft ' Eigentum. Rufen Sie außerdem die Referenz des Zielelements ab und zeigen Sie die Werte dieser Variablen darüber an. In diesem Blog wurde der Prozess für den Zugriff auf die Eigenschaft window.screenLeft in JavaScript erläutert.