Dimensioni di jQuery

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

Metodi dimensione di jQuery

jQuery fornisce molti metodi importanti per la gestione delle dimensioni:

  • width()
  • height()
  • innerWidth()
  • innerHeight()
  • outerWidth()
  • outerHeight()

Metodi width() e height() di jQuery

Il metodo width() imposta o restituisce la larghezza dell'elemento (esclusa la spaziatura interna, i bordi o la spaziatura esterna).

Il metodo height() imposta o restituisce l'altezza dell'elemento (esclusa la spaziatura interna, i bordi o la spaziatura esterna).

Esempio seguente restituisce la larghezza e l'altezza dell'elemento <div> specificato:

Esempio

$("button").click(function(){
  var txt="";
  txt += "Larghezza: " + $("#div1").width() + "</br>";
  txt += "Altezza: " + $("#div1").height();
  $("#div1").html(txt);
);

Prova tu stesso

Metodi innerWidth() e innerHeight() di jQuery

Il metodo innerWidth() restituisce la larghezza dell'elemento (inclusa la spaziatura interna).

Il metodo innerHeight() restituisce l'altezza dell'elemento (inclusa la spaziatura interna).

Esempio seguente restituisce la larghezza/altezza interna dell'elemento <div> specificato:

Esempio

$("button").click(function(){
  var txt="";
  txt += "Larghezza interna: " + $("#div1").innerWidth() + "</br>";
  txt += "Altezza interna: " + $("#div1").innerHeight();
  $("#div1").html(txt);
);

Prova tu stesso

Metodi jQuery outerWidth() e outerHeight()

Il metodo outerWidth() restituisce la larghezza dell'elemento (inclusi il margine interno e i bordi).

Il metodo outerHeight() restituisce l'altezza dell'elemento (inclusi il margine interno e i bordi).

Nell'esempio seguente viene restituita l'outer-width/height dell'elemento <div> specificato:

Esempio

$("button").click(function(){
  var txt="";
  txt+="Larghezza esterna: " + $("#div1").outerWidth() + "</br>";
  txt+="Altezza esterna: " + $("#div1").outerHeight();
  $("#div1").html(txt);
);

Prova tu stesso

Il metodo outerWidth(true) restituisce la larghezza dell'elemento (inclusi il margine interno, i bordi e il margine esterno).

Il metodo outerHeight(true) restituisce l'altezza dell'elemento (inclusi il margine interno, i bordi e il margine esterno).

Esempio

$("button").click(function(){
  var txt="";
  txt+="Larghezza esterna (+margine): " + $("#div1").outerWidth(true) + "</br>";
  txt+="Altezza esterna (+margine): " + $("#div1").outerHeight(true);
  $("#div1").html(txt);
);

Prova tu stesso

jQuery - Più width() e height()

Nell'esempio seguente viene restituita la larghezza e l'altezza del documento (documento HTML) e della finestra (finestra del browser):

Esempio

$("button").click(function(){
  var txt="";
  txt+="Larghezza/altezza documento: " + $(document).width();
  txt+="x" + $(document).height() + "\n";
  txt+="Larghezza/altezza finestra: " + $(window).width();
  txt+="x" + $(window).height();
  alert(txt);
);

Prova tu stesso

Nell'esempio seguente viene impostata la larghezza e l'altezza dell'elemento <div> specificato:

Esempio

$("button").click(function(){
  $("#div1").width(500).height(500);
);

Prova tu stesso

Manuale di jQuery CSS

Per una guida completa su jQuery Dimensions, visitate la nostra guida jQuery su dimensioni.