Metodo outerWidth
Il metodo outerWidth consente di ottenere
e modificare la larghezza di un elemento tenendo conto dei margini interni,
del bordo e, opzionalmente, dei margini esterni. È 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, o se
l'elemento o il suo genitore sono nascosti.
Sintassi
In questo modo possiamo ottenere la larghezza di un 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([includendo_margin]);
Per modificare la larghezza di un elemento, è possibile passare semplicemente
un numero (ad esempio 400), in questo caso l'unità
di misura sarà in pixel, oppure una stringa,
con l'indicazione dell'unità di misura (ad esempio
'10em'):
$(selettore).outerWidth(nuovo valore, [includendo_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 della larghezza specificata per l'elemento
singolo. this all'interno della funzione
indicherà l'elemento corrente.
Il valore della larghezza dell'elemento cambierà in base
a ciò che la funzione restituisce:
$(selettore).outerWidth(function(indice nel set, valore corrente della larghezza));
Esempio
Per confronto, visualizziamo le informazioni sulla
larghezza del paragrafo #test, ottenute con i metodi
width,
innerWidth e
outerWidth:
<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 w1 = $('#test').width();
let w2 = $('#test').innerWidth();
let w3 = $('#test').outerWidth(false);
let w4 = $('#test').outerWidth(true);
$('#out1').text(w1);
$('#out2').text(w2);
$('#out3').text(w3);
$('#out4').text(w4);
Vedi anche
-
metodo
width,
che consente di ottenere e modificare la larghezza di un elemento -
metodo
innerWidth,
che consente di ottenere e modificare la larghezza di un elemento, tenendo conto dei suoi margini interni
