Αυτό το ιστολόγιο δείχνει τη χρήση του στοιχείου DOM Ύψος πελάτη σε HTML.
Πώς να χρησιμοποιήσετε το στοιχείο DOM 'clientHeight' σε HTML;
Ο ' Ύψος πελάτη Η ιδιότητα ' επιτρέπει στους προγραμματιστές να υπολογίσουν το ύψος του ορατού περιεχομένου ενός στοιχείου. Βοηθά στην τοποθέτηση στοιχείων μεταξύ τους ή στον προσδιορισμό του εάν ένας χρήστης έχει κάνει κύλιση στη δεξιά άκρη ενός κοντέινερ με δυνατότητα κύλισης. Παρέχει επίσης πληροφορίες σχετικά με τον υπόλοιπο αχρησιμοποίητο χώρο στην ιστοσελίδα.
Παράδειγμα
Ας δούμε ένα παράδειγμα για μια καλύτερη επίδειξη της ιδιότητας 'clientHeight'. Για παράδειγμα, το « στο κλικ ' το πρόγραμμα ακρόασης συμβάντων χρησιμοποιείται για την εμφάνιση του αποτελέσματος που παρέχεται από το ' Ύψος πελάτη ” ιδιοκτησία:
< σώμα >
< h2 ταυτότητα = 'στοιχείο' >< / h2 >
< h2 ταυτότητα = 'στοιχείο' στο κλικ = 'showelementHeight()' >
Κάντε κλικ στο άρθρο Linuxhint για να εμφανίσετε το ύψος!
< / h2 >
< γραφή >
συνάρτηση showelementHeight() {
var example = document.getElementById('στοιχείο');
var elementHeight= example.clientHeight;
alert('Το Ύψος είναι: ' + στοιχείοΎψος + ' pixel.');
}
< / γραφή > >
< / σώμα >
Η εξήγηση του παραπάνω αποσπάσματος κώδικα περιγράφεται παρακάτω:
- Αρχικά, δημιουργήστε ένα ' 'ετικέτα μέσα στο ' <σώμα> Κάντε ετικέτα και παρέχετε μερικά εικονικά δεδομένα σε αυτό. Επίσης, ορίστε ένα αναγνωριστικό του ' στοιχείο ' στο επιλεγμένο στοιχείο HTML.
- Στη συνέχεια, προσθέστε ένα ' στο κλικ() ' ακροατής συμβάντος που επικαλείται το ' showelementHeight() λειτουργία ' όταν ο χρήστης κάνει κλικ στο ' ' στοιχείο.
- Στη συνέχεια, μέσα στο « showelementHeight() Η συνάρτηση ' δημιουργεί μια μεταβλητή με το όνομα ' παράδειγμα ' που λειτουργεί ως στιγμιότυπο για το στοιχείο HTML που έχει αναγνωριστικό ' στοιχείο '.
- Στη συνέχεια, δημιουργήστε μια άλλη μεταβλητή με το όνομα ' Ύψος στοιχείου '' που αποθηκεύει το αποτέλεσμα που παρέχεται από την ιδιότητα 'clientHeight'.
- Μετά από αυτό, εμφανίστε το ' Ύψος στοιχείου μεταβλητή '' στο πλαίσιο ειδοποίησης χρησιμοποιώντας το ' συναγερμός() 'μέθοδος.
Στο τέλος, προσθέστε τις ακόλουθες ιδιότητες CSS για το στυλ του ' h2 ' στοιχείο:
< στυλ >
#στοιχείο {
περιθώριο: 20 px;
padding: 10px;
Ιστορικό- χρώμα : σκούρο κυανό;
ύψος : 300 px;
κείμενο- ευθυγραμμίζω : κέντρο;
γραμμή- ύψος : 100 px;
}
< / στυλ >
Στο παραπάνω απόσπασμα κώδικα, οι ακόλουθες ιδιότητες CSS εκχωρούνται στο div με αναγνωριστικό ' στοιχείο ”:
- Ο ' 20 εικονοστοιχεία », « 10 εικονοστοιχεία ' και ' μελαχρινός 'Οι τιμές παρέχονται στο CSS' περιθώριο », « υλικό παραγεμίσματος ' και ' χρώμα του φόντου ” ακίνητα, αντίστοιχα.
- Επίσης χρησιμοποιεί « ύψος », « στοίχιση κειμένου ' και ' ύψος γραμμής ” Ιδιότητες CSS για τη βελτίωση της ορατότητας του χρήστη.
Μετά την εκτέλεση του παραπάνω αποσπάσματος κώδικα, η ιστοσελίδα εμφανίζεται ως εξής:
Η έξοδος δείχνει ότι το ύψος του επιλεγμένου στοιχείου εμφανίζεται στο πλαίσιο ειδοποίησης, κάθε φορά που ο χρήστης κάνει κλικ στο στοιχείο.
συμπέρασμα
Για να χρησιμοποιήσετε το « Ύψος πελάτη ιδιότητα σε HTML, επιλέξτε το στοιχείο HTML αποκτώντας πρόσβαση στο χαρακτηριστικό id. Μετά από αυτό, επισυνάψτε την ιδιότητα 'clientHeight' και εμφανίστε το αποτέλεσμα. Είναι μια ιδιότητα μόνο για ανάγνωση και επιστρέφει το αποτέλεσμα σε pixel. Η ιδιότητα 'clientHeight' λειτουργεί μέσα στην ετικέτα '