Pour créer des conceptions de pages Web dynamiques et au pixel près, les mesures de la taille de la fenêtre sont très essentielles à comprendre et à utiliser. La mise en page souhaitée de la page Web peut ne pas être générée si la mesure de la fenêtre n'est pas prise ou utilisée correctement. Malheureusement, HTML/CSS ne fournissait aucun attribut ou propriété permettant d'obtenir des connaissances précises sur la taille de l'écran de la fenêtre et la distance de la fenêtre par rapport aux limites de l'écran d'origine.
Heureusement! JavaScript résout ce problème en fournissant son « window.screenLeft » et « window.screenTop ' Propriétés pour mesurer la position de la fenêtre à la fois sur le ' x » et « axe y ' respectivement. Notre objectif principal dans cet article est d’obtenir une position le long de l’axe X à l’aide du « window.screenLeft ' propriété. Alors commençons !
Ce blog expliquera la procédure pour utiliser ou accéder à la propriété window.screenLeft en JavaScript.
Comment accéder à la propriété « window.screenLeft » en JavaScript ?
Le ' window.screenLeft La propriété « » de JavaScript renvoie les informations liées à la position horizontale d'une fenêtre, par rapport à l'écran. Cette propriété renvoie la valeur numérique au format pixel, indiquant la distance horizontale de la fenêtre à l'écran. Visitez le code ci-dessous, dans lequel le ' window.screenLeft ' la propriété est utilisée :
< corps >
< h1 style = 'couleur : vert d'eau ;' > Linux < / h1 >
< p identifiant = 'cible' > < / p >
< scénario >
laissez-moi = window.screenLeft;
document.getElementById('target').innerHTML = 'Gauche : ' + i;
< / scénario >
< / corps >
Description du code ci-dessus :
- Tout d'abord, le HTML ' p L'élément ' est créé avec un identifiant de ' cible ».
- Ensuite, le « window.screenLeft 'La propriété est utilisée à l'intérieur du' < scénario > » et stocke le résultat dans la variable « je ».
- Ensuite, sélectionnez l’élément avec un identifiant de « cible ' et insérez la valeur du ' i' variable en utilisant le ' intérieurHTML ' propriété.
L'aperçu de la page Web est le suivant :
La sortie montre que la distance horizontale à partir de la limite gauche de l’écran est de zéro pixel.
Exemple : récupération dynamique de la valeur horizontale
La propriété screenLeft peut être utilisée avec le « redimensionner ' Écouteur d'événements pour fournir la position en temps réel de la fenêtre correspondant à l'écran le long de l'axe des x. De la même manière, la position le long de l'axe y ou de l'axe vertical peut également être récupérée en utilisant le « window.screenTop ' propriété. Ayons un code pour le scénario donné :
< corps >< h1 style = 'couleur : vert d'eau ;' > Indice Linux < / h1 >
< p identifiant = 'test' >< / p >
< scénario >
fonction dynamique ( ) {
laisse-moi = window.screenLeft;
laisse j = window.screenTop;
document.getElementById ( 'test' ) .innerHTML = « Position depuis la gauche : » +je + ', De la direction supérieure : ' +j;
}
window.addEventListener ( 'redimensionner' , dynamique ) ;
< / scénario >
L'explication du code ci-dessus est la suivante :
- Tout d’abord, l’élément ciblé a été créé avec un identifiant de « test ».
- Ensuite, le « < scénario >' est utilisée et la balise ' dynamique () »La fonction y est créée.
- À l’intérieur de la fonction, utilisez le « window.screenLeft » et « window.screenTop ' propriétés et les stocker dans ' je' et 'j 'variables respectivement.
- Après cela, sélectionnez l'élément ciblé en obtenant son identifiant ' test » et avec l'aide du « intérieurHTML La propriété ' affiche les valeurs des deux ' je' et 'j 'variables sur la page Web.
- À la fin, joignez le « redimensionner ' écouteur d'événement avec le ' fenêtre » qui invoque le « dynamique ()” fonctionnent à chaque fois que la taille de la fenêtre est modifiée.
Aperçu de la page web après la fin de la compilation :
Dans la sortie ci-dessus, la différence de fenêtre entre les côtés supérieur et gauche est reçue en pixels à mesure que la fenêtre est redimensionnée.
C’est tout à propos du « window.screeLeft ”propriété en JavaScript.
Conclusion
Pour accéder au « window.screenLeft ' propriété en JavaScript et joignez le ' redimensionner « écouteur d'événements » fenêtre ». Cela appelle la fonction de rappel chaque fois que la taille de la fenêtre est redimensionnée. Dans cette fonction, créez une variable qui stocke le « window.screenLeft ' propriété. De plus, récupérez la référence de l’élément ciblé et affichez les valeurs de cette variable dessus. Ce blog a expliqué le processus d'accès à la propriété window.screenLeft en JavaScript.