Metodo width

Il metodo width permette di ottenere e modificare la larghezza di un elemento. È importante ricordare che otterremo il 'valore calcolato' della larghezza (computed width). A differenza del metodo css('width'), restituisce un valore senza unità di misura (ad esempio 400) ed è utile per calcoli matematici. Il metodo ottiene la larghezza del contenuto dell'elemento, indipendentemente dall'indicazione della proprietà CSS box-sizing. Per evitare inconvenienti legati a ciò, si raccomanda di utilizzare css('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 tiene conto dei valori di padding e bordo.

Sintassi

Ottenere la larghezza di un elemento. In alcuni casi i valori ottenuti possono essere frazionari:

$(selettore).width();

Per modificare la larghezza di un elemento - si può passare semplicemente un numero (ad esempio 400), in tal caso l'unità di misura sarà in pixel, oppure una stringa, con l'indicazione delle unità di misura (ad esempio '10em'):

$(selettore).width(nuovo valore);

Possiamo anche applicare una determinata funzione a ciascun elemento nel set. In questo caso, il primo parametro della funzione riceverà l'indice dell'elemento nel set, mentre il secondo parametro - il valore corrente della larghezza impostata per quell'elemento specifico. Il valore this all'interno della funzione indicherà l'elemento corrente. Il valore della larghezza dell'elemento cambierà in base a quanto restituito dalla funzione:

$(selettore).width(function(indice nel set, valore corrente della larghezza));

Esempio

Modifichiamo la larghezza di un div al click, impostandola a 40px, utilizzando il metodo width, e inoltre con css cambiamo lo sfondo in verde:

<div id="test"></div>

#test {
	width: 90px; 
	height: 80px;
	background: red; 
	color: white;
	margin-top: 10px; 
	cursor: pointer;
}

$('#test').one('click', function() {
	$(this).width(40).css({
		cursor: 'auto',
		backgroundColor: 'green'
	});
});

Vedi anche

metodo height,
che permette di ottenere e modificare l'altezza di un elemento
metodo innerWidth,
che permette di ottenere e modificare la larghezza di un elemento, tenendo conto dei suoi padding interni
metodo outerWidth,
che permette di ottenere e modificare la larghezza di un elemento, tenendo conto dei suoi padding e bordo
metodo css,
che permette di ottenere e modificare gli stili CSS di un elemento