Metodi innerWidth e innerHeight in jQuery

Con i metodi innerWidth e innerHeight otteniamo la larghezza e l'altezza degli elementi, ma questa volta tenendo conto non solo del contenuto, ma anche dei rientri interni - padding.

Otteniamo i valori della larghezza e dell'altezza del paragrafo #test, ma questa volta utilizzando innerWidth e innerHeight, e visualizziamoli in un altro paragrafo. Supponiamo di avere due paragrafi:

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

Il CSS appare così:

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

In Javascript scriviamo il seguente codice:

let w = $('#test').innerWidth();
let h = $('#test').innerHeight();
$('#out').text('Larghezza: ' + w + ' Altezza: ' + h);

Come potete vedere, i valori differiscono già di 10px, poiché vengono presi in considerazione i rientri interni, che nel nostro caso sono di 5px su tutti i lati.

Allo stesso modo, semplicemente con i metodi innerWidth e innerHeight possiamo cambiare i valori della larghezza e dell'altezza degli elementi. Ad esempio, impostiamo la larghezza del div #test1 a 250px e l'altezza di #test2 a 200px:

$('#test1').innerWidth(250);
$('#test2').innerHeight(200);

Completa la soluzione del primo problema - visualizza nel secondo paragrafo sotto il div #wrapper i valori della larghezza e dell'altezza del div #wrapper, questa volta tenendo conto dei rientri interni, ma senza considerare i bordi e i margini esterni.