Metodi outerWidth e outerHeight in jQuery

L'ultima coppia di metodi - outerWidth e outerHeight, con i quali è possibile ottenere la larghezza e l'altezza di un elemento tenendo conto di tutti i margini e i bordi, oppure si possono escludere i margini esterni margin.

Consideriamo un esempio. Supponiamo di avere un paragrafo:

<p id="test">testo</p>
<p id="out"></p>

Il CSS è il seguente:

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

Otteniamo i valori di larghezza e altezza del paragrafo #test, tenendo conto dei margini interni e dei bordi, per questo è necessario passare false a questi metodi o lasciare le parentesi vuote (poiché è il valore predefinito del metodo):

let w = $('#test').outerWidth(false);
let h = $('#test').outerHeight();
$('#out').text('Larghezza: ' + w + ' Altezza: ' + h);

Ora i nostri valori differiranno ancora di 4px, poiché lo spessore del bordo è di 2px per ogni lato.

E ora otteniamo i valori di larghezza e altezza del paragrafo #test, tenendo conto di tutti i margini e i bordi, per questo ai metodi outerWidth e outerHeight è necessario passare true:

let w = $('#test').outerWidth(true);
let h = $('#test').outerHeight(true);
$('#out').text('Larghezza: ' + w + ' Altezza: ' + h);

Ora i nostri valori differiranno dai precedenti ancora di 20px, poiché i margini esterni sono di 10px per ogni lato.

Completa la soluzione dei compiti precedenti - visualizza nel terzo paragrafo sotto il div #wrapper i valori di larghezza e altezza del div #wrapper - tenendo conto dei margini interni e dei bordi, ma senza i margini esterni. Nel quarto paragrafo visualizza i valori di larghezza e altezza del div #wrapper tenendo conto di tutti i margini e i bordi.

Inoltre, con i metodi outerWidth e outerHeight possiamo modificare i valori di larghezza e altezza degli elementi. Ad esempio, impostiamo la larghezza del div #test1 a 250px, e l'altezza di #test2 a 200px:

$('#test1').outerWidth(250, true);
$('#test2').outerHeight(200);

Tutti i metodi descritti per lavorare con le dimensioni degli elementi prevedono anche la possibilità di applicare una funzione a ciascun elemento nel set.