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:

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

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

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

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

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

javascriptlet 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