Metoden outerHeight

Metoden outerHeight lar deg hente og endre høyden til et element med hensyn til innvendig padding, ramme og valgfritt - ytre marger. Det er viktig å huske at vi vil få en 'beregnet verdi' for høyden (computed height). Feil i beregningen kan også oppstå hvis brukeren endrer størrelsen på siden, eller hvis elementet eller dets forelder er skjult.

Syntaks

Slik kan vi hente høyden på et element. Denne metoden kan ta en valgfri parameter i form av true eller false (false er standard), avhengig av om ytre marger skal inkluderes eller ikke. I noen tilfeller kan de oppnådde verdiene være brøkdeler:

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

For å endre høyden på et element - kan du sende et tall (for eksempel 400), da vil måleenheten være piksler, eller en streng, med angivelse av måleenheter (for eksempel '10em'):

$(selector).outerHeight(new value, [including_margin]);

Vi kan også bruke en gitt funksjon på hvert element i settet. I dette tilfellet vil funksjonen motta indeksen til elementet i settet som første parameter, og som andre parameter - den nåværende verdien for høyden for det spesifikke elementet. this inne i funksjonen vil peke på det gjeldende elementet. Verdien for elementets høyde vil endres til den som returneres av funksjonen:

$(selector).outerHeight(function(index, currentHeight));

Eksempel

La oss for sammenligning skrive ut informasjon om høyden på avsnittet #test, hentet med metodene height, innerHeight og 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 også

metoden height,
som lar deg hente og endre høyden på et element
metoden innerHeight,
som lar deg hente og endre høyden på et element, med hensyn til dets innvendige padding