Μέθοδος height

Η μέθοδος height επιτρέπει τη λήψη και την αλλαγή του ύψους ενός στοιχείου. Είναι σημαντικό να θυμόμαστε, ότι θα λαμβάνουμε την 'υπολογισμένη τιμή' ύψους (computed height). Σε αντίθεση με τη μέθοδο css('height'), επιστρέφει μια αδιάστατη ποσότητα (για παράδειγμα 400) και είναι βολική για μαθηματικούς υπολογισμούς. Η μέθοδος λαμβάνει το ύψος του περιεχομένου του στοιχείου, ανεξάρτητα από την ορισμένη CSS-ιδιότητα box-sizing. Για να αποφύγουμε περιττούς υπολογισμούς, συνιστάται η χρήση του css('height'). Σφάλματα στον υπολογισμό μπορεί επίσης να προκύψουν, εάν ο χρήστης αλλάζει τις διαστάσεις της σελίδας, καθώς και, εάν το στοιχείο ή ο γονέας του είναι κρυμμένα. Η τιμή του ύψους δεν λαμβάνει υπόψη τις τιμές των περιθωρίων και του περιγράμματος.

Σύνταξη

Λήψη ύψους στοιχείου. Σε ορισμένες περιπτώσεις οι τιμές που λαμβάνονται μπορεί να είναι κλασματικές:

$(επιλογέας).height();

Για να αλλάξουμε το ύψος ενός στοιχείου - μπορούμε να περάσουμε απλώς έναν αριθμό (για παράδειγμα 400), τότε οι μονάδες μέτρησης θα είναι pixels, ή μια συμβολοσειρά, με καθορισμό μονάδων μέτρησης (για παράδειγμα '10em'):

$(επιλογέας).height(νέα τιμή);

Επίσης μπορούμε να εφαρμόσουμε μια δεδομένη συνάρτηση σε κάθε στοιχείο στο σύνολο. Στην περίπτωση αυτή η συνάρτηση θα λάβει ως πρώτη παράμετρο τον αριθμό του στοιχείου στο σύνολο, και ως δεύτερη παράμετρο - την τρέχουσα τιμή του καθορισμένου ύψους για το συγκεκριμένο στοιχείο. Το this μέσα στη συνάρτηση θα δείχνει στο τρέχον στοιχείο.

Η τιμή ύψους του στοιχείου θα αλλάξει σε αυτή, που επιστρέφει η συνάρτηση:

$(επιλογέας).height(function(αριθμός στο σύνολο, τρέχουσα τιμή ύψους));

Παράδειγμα

Ας αλλάξουμε με κλικ στο #test το ύψος του στην τιμή 30px, χρησιμοποιώντας τη μέθοδο height, και επίσης με τη βοήθεια του css ας αλλάξουμε το φόντο του σε πράσινο:

<div id="test"></div>

#test {
	width: 50px; 
	height: 90px;
	background: red; 
	color: white;
	margin-top: 10px; 
	cursor: pointer;
}

$('#test').one('click', function() {
	$(this).height(30).css({
		cursor: 'auto',
		backgroundColor: 'green'
	});
});

Δείτε επίσης

μέθοδος width,
που επιτρέπει τη λήψη και την αλλαγή του πλάτους ενός στοιχείου
μέθοδος innerHeight,
που επιτρέπει τη λήψη και την αλλαγή του ύψους ενός στοιχείου, λαμβάνοντας υπόψη τα εσωτερικά του περιθώρια
μέθοδος outerHeight,
που επιτρέπει τη λήψη και την αλλαγή του ύψους ενός στοιχείου, λαμβάνοντας υπόψη τα περιθώρια και το περίγραμμά του
μέθοδος css,
που επιτρέπει τη λήψη και την αλλαγή των CSS στυλ ενός στοιχείου