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:

javascript$(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'):

javascript$(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:

javascript$(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:

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

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

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

Vedi anche