Dimensioni jQuery

Con jQuery, è facile gestire le dimensioni degli elementi e della finestra del browser.

jQuery fornisce metodi efficaci per manipolare le dimensioni degli elementi.

In questa sezione, spiegheremo come ottenere o impostare le dimensioni degli elementi HTML.

Metodi di dimensione jQuery

Abbiamo i seguenti metodi jQuery per la gestione delle dimensioni:

• width()

• height()

• innerWidth()

• innerHeight()

• outerWidth()

• outerHeight()

Di seguito mostreremo come utilizzare ciascun metodo.

Conoscere le dimensioni di jQuery

Vedere la figura sottostante per comprendere come questi metodi calcolano le dimensioni del riquadro dell'elemento.

Metodi width() e height() di jQuery

jQuery width()Metodo per ottenere o impostare l'ampiezza dell'elemento selezionato (esclusi il margine interno, il bordo e il margine esterno).

jQuery height()Metodo per ottenere o impostare l'altezza dell'elemento selezionato (esclusi il margine interno, il bordo e il margine esterno).

Esempio di esempio per ottenere l'ampiezza e l'altezza dell'elemento DIV:

$("div").click(function(){
　　let w = $(this).width();
　　let h = $(this).height();
　　L'html di questo elemento è impostato su: "L'ampiezza del DIV: " + w + "<br>" + "L'altezza del DIV: " + h;
});

Esempio di come impostare la larghezza e l'altezza di tutti i paragrafi:

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

Metodi jQuery innerWidth() e innerHeight()

jQuery innerWidth()Questo metodo ottiene o imposta la larghezza dell'elemento selezionato (compresi i margini interni).

jQuery innerHeight()Questo metodo ottiene o imposta l'altezza dell'elemento selezionato (compresi i margini interni).

Esempio di come ottenere la larghezza e l'altezza interna di un elemento DIV:

$("div").click(function(){
　　let w = $(this).innerWidth();
　　let h = $(this).innerHeight();
　　$(this).html("Larghezza interna: " + w + "<br>" + "Altezza interna: " + h);
});

Metodi jQuery externalWidth() e outsideHeight()

jQuery outerWidth()Questo metodo ottiene o imposta la larghezza dell'elemento selezionato (compresi i margini interni e i bordi).

jQuery outerHeight()Questo metodo ottiene o imposta l'altezza dell'elemento selezionato (compresi i margini interni e i bordi).

Esempio di come ottenere la larghezza e l'altezza esterna di un elemento DIV:

$("div").click(function(){
　　let w = $(this).outerWidth();
　　let h = $(this).outerHeight();
　　$(this).html("Larghezza esterna: " + w + "<br>" + "Altezza esterna: " + h);
});

outerWidth(true) Questo metodo ottiene o imposta la larghezza dell'elemento selezionato (compresi i margini interni, i bordi e i margini).

outerHeight(true) Questo metodo ottiene o imposta l'altezza dell'elemento selezionato (compresi i margini interni, i bordi e i margini).

Esempio di come ottenere la larghezza e l'altezza esterna di un elemento DIV (compresi i margini):

$("div").click(function(){
　　let w = $(this).outerWidth(true);
　　let h = $(this).outerHeight(true);
　　$(this).html("Larghezza esterna [+margine]:" + w + "<br>" + "Altezza esterna [+margine]: " + h);
});

Più esempi

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

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

Puoi anche trovare la larghezza e l'altezza della finestra e del documento:

$(window).width(); // Restituisce la larghezza della finestra del browser
$(document).width(); // Restituisce la larghezza del documento HTML
$(window).height(); // Restituisce l'altezza della finestra del browser
$(document).height(); // Restituisce l'altezza del documento HTML

Riferimento CSS jQuery

Per una参考 completa dei metodi CSS, visita il nostroRiferimento HTML / CSS jQuery.