Metoden height

Metoden height låter dig få och ändra höjden på ett element. Det är viktigt att komma ihåg att vi får det 'beräknade värdet' av höjden (computed height). Till skillnad från metoden css('height'), returnerar den en dimensionslös storhet (till exempel 400) och är praktisk för matematiska beräkningar. Metoden får höjden på elementets innehåll, oavsett angivandet av CSS-egenskapen box-sizing. För att undvika onödiga beräkningar rekommenderas det att använda css('height'). Fel i beräkningen kan också uppstå om användaren ändrar sidans storlek, samt om elementet eller dess förälder är dolda. Höjdvärdet inkluderar inte värden för marginaler och kantlinjer.

Syntax

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

$(selector).height();

För att ändra elementets höjd - kan du skicka ett enkelt tal (till exempel 400), då blir måttenheten pixlar, eller en sträng, med angivande av måttenheter (till exempel '10em'):

$(selector).height(nytt värde);

Vi kan också applicera en given funktion på varje element i uppsättningen. Då får funktionen första parametern som elementets nummer i uppsättningen, och den andra parametern - det nuvarande värdet för 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 kommer att ändras till det som funktionen returnerar:

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

Exempel

Låt oss när vi klickar på #test ändra dess höjd till värdet 30px, med hjälp av metoden height, och även med hjälp av css ändra dess bakgrund till grön:

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

Se även

metoden width,
som låter dig få och ändra bredden på ett element
metoden innerHeight,
som låter dig få och ändra höjden på ett element, med hänsyn till dess inre utfyllnad
metoden outerHeight,
som låter dig få och ändra höjden på ett element, med hänsyn till dess utfyllnad och kantlinje
metoden css,
som låter dig få och ändra CSS-stilar för ett element