Methode innerHeight

Die Methode innerHeight ermöglicht es, die Höhe eines Elements inklusive seiner Innenabstände abzurufen und zu ändern. Es ist wichtig, sich daran zu erinnern, dass wir den 'berechneten Wert' der Höhe (computed height) erhalten. Berechnungsfehler können ebenfalls auftreten, wenn der Benutzer die Seitengröße ändert, oder wenn das Element oder sein Elternelement ausgeblendet sind. Der Höhenwert berücksichtigt nicht die Dicke des Rahmens des Elements.

Syntax

Höhe eines Elements abrufen. In einigen Fällen können die erhaltenen Werte gebrochen sein:

$(Selektor).innerHeight();

Um die Höhe eines Elements zu ändern - kann man einfach eine Zahl übergeben (z.B. 400), dann ist die Maßeinheit Pixel, oder einen String mit Angabe der Maßeinheit (z.B. '10em'):

$(Selektor).innerHeight(neuer Wert);

Wir können auch eine bestimmte Funktion auf jedes Element in der Menge anwenden. Dabei erhält die Funktion als ersten Parameter die Indexnummer des Elements in der Menge und als zweiten Parameter - den aktuellen Wert der festgelegten Höhe für das jeweilige Element. this innerhalb der Funktion wird auf das aktuelle Element zeigen. Der Höhenwert des Elements ändert sich auf den Wert, den die Funktion zurückgibt:

$(Selektor).innerHeight(function(Index in der Menge, aktueller Höhenwert));

Beispiel

Lassen Sie uns zum Vergleich Informationen über die Höhe des Absatzes #test ausgeben, die mit den Methoden height und innerHeight ermittelt wurden:

<p id="test">text</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);

Wir werden einen Unterschied von 10px sehen, was der Summe unserer oberen und unteren Innenabstände entspricht.

Siehe auch

Methode height,
die es ermöglicht, die Höhe eines Elements abzurufen und zu ändern
Methode outerHeight,
die es ermöglicht, die Höhe eines Elements abzurufen und zu ändern, einschließlich seiner Abstände und Rahmen