Metoden innerHeight

Metoden innerHeight låter dig få och ändra höjden på ett element inklusive dess inre utfyllnad. Det är viktigt att komma ihåg att vi får ett 'beräknat värde' på höjden (computed height). Beräkningsfel kan också uppstå om användaren ändrar sidans storlek, eller om elementet eller dess förälder är dolda. Höjdvärdet tar inte hänsyn till elementets kantlinjers tjocklek.

Syntax

Få höjden på elementet. I vissa fall kan de erhållna värdena vara bråktal:

$(selektor).innerHeight();

För att ändra elementets höjd - 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'):

$(selektor).innerHeight(nytt värde);

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

$(selektor).innerHeight(function(nummer i uppsättningen, aktuellt 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 och innerHeight:

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

Vi kommer att se en skillnad på 10px, vilket är summan av vår övre och nedre inre utfyllnad.

Se även

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