Methode height

De methode height maakt het mogelijk om de hoogte van een element te verkrijgen en te wijzigen. Het is belangrijk te onthouden dat we de 'berekende waarde' van de hoogte zullen verkrijgen (computed height). In tegenstelling tot de methode css('height'), retourneert het een dimensieloze grootheid (bijvoorbeeld 400) en is handig voor wiskundige berekeningen. De methode verkrijgt de hoogte van de inhoud van het element, onafhankelijk van de opgave van de CSS-eigenschap box-sizing. Om overbodige berekeningen te vermijden, wordt aanbevolen css('height') te gebruiken. Fouten in de berekening kunnen ook optreden als de gebruiker de afmetingen van de pagina wijzigt, en ook als het element of zijn ouder verborgen zijn. De hoogtewaarde houdt geen rekening met de waarden van margins en rand.

Syntaxis

Hoogte van het element verkrijgen. In sommige gevallen kunnen de verkregen waarden fractioneel zijn:

$(selector).height();

Om de hoogte van het element te wijzigen - kan men eenvoudigweg een getal doorgeven (bijvoorbeeld 400), dan zullen de meeteenheden pixels zijn, of een string, met opgave van de meeteenheden (bijvoorbeeld '10em'):

$(selector).height(nieuwe waarde);

We kunnen ook een opgegeven functie toepassen op elk element in de set. Hierbij krijgt 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 die, die door de functie wordt geretourneerd:

$(selector).height(function(index in set, huidige hoogtewaarde));

Voorbeeld

Laten we bij een klik op #test de hoogte veranderen naar de waarde 30px, gebruikmakend van de methode height, en ook met css de achtergrond kleur veranderen naar groen:

<div id="test"></div>

#test {
	width: 50px; 
	height: 90px;
	background: red; 
	color: white;
	margin-top: 10px; 
	cursor: pointer;
}

$('#test').one('click', function() {
	$(this).height(30).css({
		cursor: 'auto',
		backgroundColor: 'green'
	});
});

Zie ook

methode width,
die het mogelijk maakt om de breedte van een element te verkrijgen en te wijzigen
methode innerHeight,
die het mogelijk maakt om de hoogte van een element te verkrijgen en te wijzigen, rekening houdend met de binnenmarges
methode outerHeight,
die het mogelijk maakt om de hoogte van een element te verkrijgen en te wijzigen, rekening houdend met de marges en rand
methode css,
die het mogelijk maakt om CSS-stijlen van een element te verkrijgen en te wijzigen