Metodo innerHeight

Il metodo innerHeight consente di ottenere e modificare l'altezza di un elemento tenendo conto dei suoi padding interni. È importante ricordare che otterremo il 'valore calcolato' dell'altezza (computed height). Errori di calcolo possono verificarsi anche se l'utente cambia le dimensioni della pagina, oppure se l'elemento o il suo genitore sono nascosti. Il valore dell'altezza non tiene conto dello spessore del bordo dell'elemento.

Sintassi

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

$(selettore).innerHeight();

Per modificare l'altezza dell'elemento - puoi 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).innerHeight(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 lo specifico elemento. this all'interno della funzione indicherà l'elemento corrente. Il valore dell'altezza dell'elemento cambierà in base a quanto restituito dalla funzione:

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

Esempio

Per confronto, visualizziamo le informazioni sull'altezza del paragrafo #test, ottenute con i metodi height e innerHeight:

<p id="test">testo</p>
<p id="out1"></p>
<p id="out2"></p>

p {
	margin: 10px;
	padding: 5px;
	border: 2px solid blue;
}

let h1 = $('#test').height();
let h2 = $('#test').innerHeight();

$('#out1').text(h1);
$('#out2').text(h2);

Vedremo una differenza di 10px, che corrisponde alla somma dei nostri padding interni superiore e inferiore.

Vedi anche

metodo height,
che consente di ottenere e modificare l'altezza di un elemento
metodo outerHeight,
che consente di ottenere e modificare l'altezza di un elemento, tenendo conto dei suoi padding e del bordo