Metodo innerWidth

Il metodo innerWidth permette di ottenere e modificare la larghezza di un elemento considerando i suoi margini interni. È importante ricordare che otterremo il 'valore calcolato' della larghezza (computed width). Errori di calcolo possono anche verificarsi se l'utente cambia le dimensioni della pagina, oppure se l'elemento o il suo genitore sono nascosti. Il valore della larghezza non considera lo spessore del bordo dell'elemento.

Sintassi

Ottenere la larghezza dell'elemento. In alcuni casi i valori ottenuti possono essere frazionari:

$(selettore).innerWidth();

Per modificare la larghezza dell'elemento - si può 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'):

$(selettore).innerWidth(nuovo valore);

Possiamo anche applicare una determinata funzione a ogni elemento nell'insieme. In questo caso, il primo parametro della funzione riceverà il numero dell'elemento nell'insieme, mentre il secondo parametro - il valore corrente della larghezza impostata per lo specifico elemento. Il valore this all'interno della funzione indicherà l'elemento corrente. Il valore della larghezza dell'elemento cambierà in base a quello restituito dalla funzione:

$(selettore).innerWidth(function(numero nell'insieme, valore corrente della larghezza));

Esempio

Per confronto, visualizziamo le informazioni sulla larghezza del paragrafo #test, ottenuta con i metodi width e innerWidth:

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

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

let w1 = $('#test').width();
let w2 = $('#test').innerWidth();

$('#out1').text(w1);
$('#out2').text(w2);

Vedremo una differenza di 10px, che corrisponde alla somma dei nostri margini interni sinistro e destro.

Vedi anche

metodo width,
che permette di ottenere e modificare la larghezza dell'elemento
metodo outerWidth,
che permette di ottenere e modificare la larghezza dell'elemento, considerando i suoi margini e il bordo