Metodo outerHeight

Il metodo outerHeight consente di ottenere e modificare l'altezza di un elemento tenendo conto dei margini interni, del bordo e, selettivamente, dei margini esterni. È importante ricordare che otterremo il 'valore calcolato' dell'altezza (computed 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.

Sintassi

In questo modo possiamo ottenere l'altezza dell'elemento. Questo metodo può accettare un parametro opzionale sotto forma di true o false (false è il valore predefinito), a seconda che si vogliano includere o meno i margini esterni. In alcuni casi i valori ottenuti possono essere frazionari:

javascript$(selettore).outerWidth([includi_margin]);

Per modificare l'altezza dell'elemento, è possibile passare semplicemente un numero (ad esempio 400), in tal caso l'unità di misura sarà in pixel, oppure una stringa, con l'indicazione dell'unità di misura (ad esempio '10em'):

javascript$(selettore).outerHeight(nuovo valore, [includi_margin]);

Possiamo anche applicare una determinata funzione a ogni elemento nel set. In questo caso, la funzione riceverà come primo parametro l'indice dell'elemento nel set, e come secondo parametro il valore corrente dell'altezza specificata per l'elemento specifico. 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).outerHeight(function(indice nel set, valore corrente altezza));

Esempio

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

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

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

javascriptlet h1 = $('#test').height();
let h2 = $('#test').innerHeight();
let h3 = $('#test').outerHeight();
let h4 = $('#test').outerHeight(true);

$('#out1').text(h1);
$('#out2').text(h2);
$('#out3').text(h3);
$('#out4').text(h4);

Vedi anche