Για τη δημιουργία δυναμικών σχεδίων ιστοσελίδων με τέλεια pixel, οι μετρήσεις του μεγέθους του παραθύρου είναι πολύ κρίσιμο να κατανοηθούν και να χρησιμοποιηθούν. Η επιθυμητή διάταξη ιστοσελίδας ενδέχεται να μην δημιουργηθεί εάν η μέτρηση του παραθύρου δεν ληφθεί ή χρησιμοποιηθεί σωστά. Δυστυχώς, το HTML/CSS δεν παρείχε κανένα χαρακτηριστικό ή ιδιότητα για την απόκτηση ακριβών γνώσεων σχετικά με το μέγεθος της οθόνης του παραθύρου και την απόσταση του παραθύρου από τα αρχικά όρια οθόνης.
Ευτυχώς! Η JavaScript επιλύει αυτό το ζήτημα παρέχοντας το ' window.screenLeft' και 'window.screenTop ' ιδιότητες για τη μέτρηση της θέσης του παραθύρου και στα δύο ' x' και 'y-άξονας ” αντίστοιχα. Η κύρια εστίασή μας σε αυτό το άρθρο είναι να πάρουμε μια θέση κατά μήκος του άξονα Χ με τη βοήθεια του ' window.screenΑριστερά ” ιδιοκτησία. Λοιπόν, ας ξεκινήσουμε!
Αυτό το ιστολόγιο θα εξηγήσει τη διαδικασία χρήσης ή πρόσβασης στην ιδιότητα window.screenLeft στο JavaScript.
Πώς να αποκτήσετε πρόσβαση στην ιδιότητα 'window.screenLeft' στο JavaScript;
Ο ' window.screenΑριστερά Η ιδιότητα ' της JavaScript επιστρέφει τις πληροφορίες που σχετίζονται με την οριζόντια θέση ενός παραθύρου, σε σχέση με την οθόνη. Αυτή η ιδιότητα επιστρέφει την αριθμητική τιμή σε μορφή pixel, δείχνοντας την οριζόντια απόσταση του παραθύρου από την οθόνη. Επισκεφτείτε τον παρακάτω κωδικό, στον οποίο το ' window.screenΑριστερά 'Ακίνητο αξιοποιείται:
< σώμα >
< h1 στυλ = 'χρώμα: θαλασσινό;' > Linux < / h1 >
< Π ταυτότητα = 'στόχος' > < / Π >
< γραφή >
let i = window.screenLeft;
document.getElementById('target').innerHTML = 'Αριστερά: ' + i;
< / γραφή >
< / σώμα >
Περιγραφή του παραπάνω κώδικα:
- Πρώτον, το HTML ' Π ' το στοιχείο δημιουργείται με ένα αναγνωριστικό ' στόχος '.
- Στη συνέχεια, το « window.screenΑριστερά 'η ιδιότητα χρησιμοποιείται μέσα στο '< γραφή >' κάνει ετικέτα και αποθηκεύει το αποτέλεσμα στη μεταβλητή ' Εγώ '.
- Στη συνέχεια, επιλέξτε το στοιχείο με ένα αναγνωριστικό ' στόχος ’ και εισαγάγετε την τιμή του ' i' μεταβλητή χρησιμοποιώντας το ' innerHTML ” ιδιοκτησία.
Η προεπισκόπηση της ιστοσελίδας έχει ως εξής:
Η έξοδος δείχνει ότι η οριζόντια απόσταση από το αριστερό όριο της οθόνης είναι μηδέν pixel.
Παράδειγμα: Δυναμική ανάκτηση της οριζόντιας τιμής
Η ιδιότητα screenLeft μπορεί να χρησιμοποιηθεί μαζί με το ' αλλαγή μεγέθους ακρόαση συμβάντων για να παρέχει τη θέση του παραθύρου σε πραγματικό χρόνο που αντιστοιχεί στην οθόνη κατά μήκος του άξονα x. Με τον ίδιο τρόπο, η θέση κατά μήκος του άξονα y ή του κατακόρυφου άξονα μπορεί επίσης να ανακτηθεί χρησιμοποιώντας το « window.screenTop ” ιδιοκτησία. Ας έχουμε έναν κωδικό για το δεδομένο σενάριο:
< σώμα >< h1 στυλ = 'χρώμα: θαλασσινό;' > Linuxhint < / h1 >
< Π ταυτότητα = 'δοκιμή' >< / Π >
< γραφή >
δυναμική λειτουργίας ( ) {
ας μου = window.screenLeft;
ας j = window.screenTop;
document.getElementById ( 'δοκιμή' ) .innerHTML = 'Θέση από την αριστερή κατεύθυνση:' + i + ', Από Κορυφαία Σκηνοθεσία: ' + j;
}
window.addEventListener ( 'αλλαγή μεγέθους' , δυναμική ) ;
< / γραφή >
Η επεξήγηση του παραπάνω κώδικα έχει ως εξής:
- Πρώτον, το στοχευμένο στοιχείο έχει δημιουργηθεί με αναγνωριστικό ' δοκιμή '.
- Στη συνέχεια, το «< γραφή Χρησιμοποιείται η ετικέτα >' και η ετικέτα ' δυναμικός ()” δημιουργείται σε αυτό η συνάρτηση.
- Μέσα στη συνάρτηση, χρησιμοποιήστε το ' window.screenLeft' και 'window.screenTop ' ακίνητα και αποθηκεύστε τα σε ' i» και «j ” μεταβλητές αντίστοιχα.
- Μετά από αυτό, επιλέξτε το στοχευμένο στοιχείο παίρνοντας το αναγνωριστικό του ' δοκιμή » και με τη βοήθεια του « innerHTML Η ιδιότητα εμφανίζει τις τιμές και για τα δύο i» και «j ' μεταβλητές πάνω από την ιστοσελίδα.
- Στο τέλος, επισυνάψτε το ' αλλαγή μεγέθους ' ακροατής εκδήλωσης με το ' παράθυρο 'που επικαλείται το' δυναμικός ()” λειτουργία κάθε φορά που αλλάζει το μέγεθος του παραθύρου.
Προεπισκόπηση της ιστοσελίδας μετά το τέλος της συλλογής:
Στην παραπάνω έξοδο, η διαφορά παραθύρου από την επάνω και την αριστερή πλευρά λαμβάνεται σε pixel καθώς το μέγεθος του παραθύρου αλλάζει.
Αυτό είναι όλο για το ' window.screeLeft ιδιότητα σε JavaScript.
συμπέρασμα
Για πρόσβαση στο ' window.screenΑριστερά ' ιδιοκτησία σε JavaScript και επισυνάψτε το ' αλλαγή μεγέθους 'ακατής εκδήλωσης σε' παράθυρο '. Αυτό καλεί τη λειτουργία επανάκλησης κάθε φορά που αλλάζει το μέγεθος του παραθύρου. Μέσα σε αυτήν τη συνάρτηση, δημιουργήστε μια μεταβλητή που αποθηκεύει το ' window.screenΑριστερά ” ιδιοκτησία. Επιπλέον, ανακτήστε την αναφορά του στοχευόμενου στοιχείου και εμφανίστε τις τιμές αυτής της μεταβλητής πάνω από αυτό. Αυτό το ιστολόγιο έχει εξηγήσει τη διαδικασία πρόσβασης στην ιδιότητα window.screenLeft στο JavaScript.