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:
$(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'):
$(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:
$(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:
<p id="test">testo</p>
<p id="out1"></p>
<p id="out2"></p>
<p id="out3"></p>
<p id="out4"></p>
p {
margin: 10px;
padding: 5px;
border: 2px solid blue;
}
let 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
-
metodo
height,
che consente di ottenere e modificare l'altezza di un elemento -
metodo
innerHeight,
che consente di ottenere e modificare l'altezza di un elemento, tenendo conto dei suoi margini interni
