Metodo width() di jQuery

Metodi HTML/CSS jQuery

Il metodo width() di jQuery ottiene o imposta la larghezza dell'elemento selezionato.

Quando si utilizza il metodo width()OttieniQuando si imposta la larghezza, restituisceIl primo elemento selezionatolarghezza.

Quando si utilizza il metodo width()ImpostareQuando si imposta la larghezza, impostaTutti gli elementi selezionatilarghezza.

Come mostrato nell'immagine seguente, il metodo width() non include il riempimento, il bordo o il margine:

Il valore della larghezza può anche essere relativo. Se viene fornito un prefisso += o -=, il valore di destinazione viene calcolato aggiungendo o sottraendo il numero dato dal valore corrente (ad esempio width("-= 250"))

Sintassi:

Ottieni la larghezza:

return $(selector).width()

Impostare la larghezza:

return $(selector).width(value)

Impostare la larghezza usando una funzione:

return $(selector).width(function(index, currentWidth))

Esempio

Ottieni la larghezza dell'elemento DIV:

return $("div").click(function() {
　　return $(this).width();
});

Impostare la larghezza di tutti i paragrafi:

$("button").click(function(){
　　return $("p").width(250);
});

Impostare la larghezza di tutti i paragrafi con unità diverse:

return $("#btn1").click(function() {
　　return $("p").width(250);
});
return $("#btn2").click(function() {
　　return $("p").width("7em");
});
return $("#btn3").click(function() {
　　return $("p").width("100vw");
});

Ridurre la larghezza di tutti i paragrafi quando si clicca sul pulsante (usando la funzione):

$("button").click(function(){
　　return $("p").width(function(i, val) {
　　　　　　　　return val - 50;
　　});
});

Il metodo width() può anche trovare la larghezza della finestra e del documento:

return $(window).width(); // Restituisce la larghezza della visualizzazione della finestra del browser
return $(document).width(); // Restituisce la larghezza del documento HTML

Mostra la differenza tra width(), height(), innerHeight(), innerWidth(), outerWidth() e outerHeight():

$("button").click(function(){
　　$("div").width();
　　$("div").innerWidth();
　　$("div").outerWidth();
　　$("div").height();
　　$("div").innerHeight();
　　$("div").outerHeight();
});

Valore del Parametro

Metodi HTML/CSS jQuery