Methode outerHeight

Die Methode outerHeight ermöglicht es, die Höhe eines Elements inklusive Innenabständen, Rahmen und optional Außenabständen 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 auch auftreten, wenn der Benutzer die Seitengröße ändert, oder wenn das Element oder sein Elternelement ausgeblendet sind.

Syntax

So können wir die Höhe eines Elements abrufen. Diese Methode kann einen optionalen Parameter in Form von true oder false entgegennehmen (false ist standardmäßig gesetzt), je nachdem, ob die äußeren Abstände berücksichtigt werden sollen oder nicht. In einigen Fällen können die erhaltenen Werte gebrochen sein:

$(Selector).outerWidth([include_margin]);

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

$(Selector).outerHeight(neuer Wert, [include_margin]);

Wir können auch eine definierte Funktion auf jedes Element im Set anwenden. Dabei erhält die Funktion als ersten Parameter den Index des Elements im Set 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:

$(Selector).outerHeight(function(Index im Set, aktueller Höhenwert));

Beispiel

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

<p id="test">text</p>
<p id="out1"></p>
<p id="out2"></p>
<p id="out3"></p>
<p id="out4"></p>

p {
	margin: 10px;
	padding: 5px;
	border: 2px solid blue;
}

let h1 = $('#test').height();
let h2 = $('#test').innerHeight();
let h3 = $('#test').outerHeight();
let h4 = $('#test').outerHeight(true);

$('#out1').text(h1);
$('#out2').text(h2);
$('#out3').text(h3);
$('#out4').text(h4);

Siehe auch

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