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:

javascript$(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'):

javascript$(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:

javascript$(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:

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

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

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

Vedi anche