Metodo height

Il metodo height permette di ottenere e modificare l'altezza di un elemento. È importante ricordare che otterremo il 'valore calcolato' dell'altezza (computed height). A differenza del metodo css('height'), restituisce un valore senza unità di misura (ad esempio 400) ed è utile per calcoli matematici. Il metodo ottiene l'altezza del contenuto dell'elemento, indipendentemente dall'impostazione della proprietà CSS box-sizing. Per evitare calcoli non necessari, si raccomanda di usare css('height'). Errori di calcolo possono anche verificarsi se l'utente cambia le dimensioni della pagina, o se l'elemento o il suo genitore sono nascosti. Il valore dell'altezza non include i margini interni (padding) e il bordo.

Sintassi

Ottenere l'altezza di un elemento. In alcuni casi i valori ottenuti possono essere frazionari:

$(selettore).height();

Per modificare l'altezza di un elemento - si può passare semplicemente un numero (ad esempio 400), in questo caso l'unità di misura sarà in pixel, oppure una stringa, con l'indicazione delle unità di misura (ad esempio '10em'):

$(selettore).height(nuovo valore);

Possiamo anche applicare una determinata funzione a ogni elemento nel set. In questo caso, il primo parametro della funzione riceverà l'indice dell'elemento nel set, mentre il secondo parametro - il valore corrente dell'altezza impostata per quell'elemento specifico. this all'interno della funzione punterà all'elemento corrente.

Il valore dell'altezza dell'elemento cambierà in base a quanto restituito dalla funzione:

$(selettore).height(function(indice nel set, valore corrente altezza));

Esempio

Modifichiamo l'altezza di #test al click impostandola a 30px, utilizzando il metodo height, e inoltre con css cambiamo lo sfondo in verde:

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

Vedi anche

metodo width,
che permette di ottenere e modificare la larghezza di un elemento
metodo innerHeight,
che permette di ottenere e modificare l'altezza di un elemento, considerando i margini interni (padding)
metodo outerHeight,
che permette di ottenere e modificare l'altezza di un elemento, considerando margini interni (padding) e bordo
metodo css,
che permette di ottenere e modificare gli stili CSS di un elemento