Metoden outerHeight

Metoden outerHeight låter dig få och ändra höjden på ett element inklusive inre utfyllnad, kant och selektivt - yttre marginal på elementet. Det är viktigt att komma ihåg att vi kommer att få ett 'beräknat värde' på höjden (computed height). Fel i beräkningen kan också uppstå om användaren ändrar sidans storlek, eller om elementet eller dess förälder är dolda.

Syntax

Så här kan vi få höjden på ett element. Denna metod kan ta en valfri parameter i form av true eller false (false är standard), beroende på om yttre marginal ska inkluderas eller inte. I vissa fall kan de erhållna värdena vara bråktal:

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

För att ändra höjden på ett element - kan du skicka ett enkelt tal (till exempel 400), då kommer måttenheten att vara pixlar, eller en sträng, med angiven måttenhet (till exempel '10em'):

$(selector).outerHeight(nytt värde, [include_margin]);

Vi kan också applicera en given funktion på varje element i uppsättningen. Då får funktionen det första parametern som elementets index i uppsättningen, och den andra parametern - det nuvarande värdet på den givna höjden för det specifika elementet. this inuti funktionen kommer att peka på det aktuella elementet. Värdet på elementets höjd ändras till det som funktionen returnerar:

$(selector).outerHeight(function(index i uppsättningen, nuvarande höjdvärde));

Exempel

Låt oss för jämförelse skriva ut information om höjden på stycket #test, erhållen med metoderna height, innerHeight och outerHeight:

<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);

Se även

metoden height,
som låter dig få och ändra höjden på ett element
metoden innerHeight,
som låter dig få och ändra höjden på ett element, med hänsyn till dess inre utfyllnad