Methode outerHeight
De methode outerHeight maakt het mogelijk om
de hoogte van een element op te vragen
en te wijzigen, rekening houdend met padding,
rand en optioneel - marge van het element. Het is belangrijk
om te onthouden dat we de 'berekende waarde' van de hoogte
(computed height) zullen krijgen.
Berekeningsfouten kunnen ook optreden als
de gebruiker de afmetingen van de pagina wijzigt, of als
het element of zijn ouder verborgen is.
Syntaxis
Zo kunnen we de hoogte van een element verkrijgen. Deze methode kan
een optionele parameter accepteren in de vorm van true
of false (false is standaard),
afhankelijk van of de marge
wordt meegerekend of niet. In sommige gevallen
kunnen de verkregen waarden decimaal zijn:
$(selector).outerWidth([inclusief_margin]);
Om de hoogte van een element te wijzigen - kan men simpelweg
een nummer doorgeven (bijvoorbeeld 400), dan is de meeteenheid
pixels, of een string,
met vermelding van de meeteenheid (bijvoorbeeld
'10em'):
$(selector).outerHeight(nieuwe waarde, [inclusief_margin]);
We kunnen ook een opgegeven functie toepassen op elk
element in de set. Hierbij ontvangt de functie als eerste parameter de index van het element in de set, en als tweede parameter
de huidige waarde van de opgegeven hoogte voor dat specifieke
element. this binnen de functie zal
wijzen naar het huidige element.
De hoogtewaarde van het element verandert naar de waarde
die door de functie wordt geretourneerd:
$(selector).outerHeight(function(index in set, huidige hoogtewaarde));
Voorbeeld
Laten we ter vergelijking informatie over de
hoogte van paragraaf #test weergeven, verkregen met de methodes
height,
innerHeight en
outerHeight:
<p id="test">tekst</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);
Zie ook
-
methode
height,
die het mogelijk maakt om de hoogte van een element op te vragen en te wijzigen -
methode
innerHeight,
die het mogelijk maakt om de hoogte van een element op te vragen en te wijzigen, rekening houdend met zijn padding
