Μέθοδος innerHeight
Η μέθοδος innerHeight επιτρέπει τη λήψη
και αλλαγή του ύψους ενός στοιχείου λαμβάνοντας υπόψη τα εσωτερικά του
περιθώρια. Είναι σημαντικό να θυμόμαστε ότι θα λαμβάνουμε
την 'υπολογιζόμενη τιμή' του ύψους
(computed height).
Σφάλματα στον υπολογισμό μπορούν επίσης να προκύψουν εάν
ο χρήστης αλλάζει τις διαστάσεις της σελίδας, ή εάν
το στοιχείο ή ο γονέας του είναι κρυμμένοι. Η τιμή του ύψους δεν
λαμβάνει υπόψη το πάχος του περιγράμματος του στοιχείου.
Σύνταξη
Λήψη ύψους στοιχείου. Σε ορισμένες περιπτώσεις οι τιμές που λαμβάνονται μπορεί να είναι κλασματικές:
$(επιλογέας).innerHeight();
Για να αλλάξουμε το ύψος του στοιχείου - μπορούμε να περάσουμε απλώς έναν
αριθμό (για παράδειγμα 400), τότε οι μονάδες
μέτρησης θα είναι σε pixels, ή μια συμβολοσειρά,
με καθορισμό μονάδων μέτρησης (για παράδειγμα
'10em'):
$(επιλογέας).innerHeight(νέα τιμή);
Μπορούμε επίσης να εφαρμόσουμε μια δεδομένη συνάρτηση σε κάθε
στοιχείο στο σύνολο. Σε αυτήν την περίπτωση, η συνάρτηση θα λάβει ως πρώτη παράμετρο
τον αριθμό του στοιχείου στο σύνολο, και ως δεύτερη παράμετρο
- την τρέχουσα τιμή του καθορισμένου ύψους για το συγκεκριμένο
στοιχείο. Το this μέσα στη συνάρτηση θα
δείχνει στο τρέχον στοιχείο.
Η τιμή ύψους του στοιχείου θα αλλάξει σε αυτήν
που επιστρέφει η συνάρτηση:
$(επιλογέας).innerHeight(function(αριθμός στο σύνολο, τρέχουσα τιμή ύψους));
Παράδειγμα
Ας εμφανίσουμε για σύγκριση πληροφορίες σχετικά με το
ύψος της παραγράφου #test, που ελήφθη με τις μεθόδους
height
και innerHeight:
<p id="test">κείμενο</p>
<p id="out1"></p>
<p id="out2"></p>
p {
margin: 10px;
padding: 5px;
border: 2px solid blue;
}
let h1 = $('#test').height();
let h2 = $('#test').innerHeight();
$('#out1').text(h1);
$('#out2').text(h2);
Θα δούμε μια διαφορά 10px, που είναι το άθροισμα
των άνω και κάτω εσωτερικών περιθωρίων μας.
Δείτε επίσης
-
μέθοδος
height,
που επιτρέπει τη λήψη και αλλαγή του ύψους ενός στοιχείου -
μέθοδος
outerHeight,
που επιτρέπει τη λήψη και αλλαγή του ύψους ενός στοιχείου, λαμβάνοντας υπόψη τα περιθώρια και το περίγραμμά του