Le dimensioni degli elementi

In questa lezione, vediamo come lavorare con le dimensioni degli elementi utilizzando i metodi della libreria di jQuery.

I metodi per lavorare con le dimensioni degli elementi

Vediamo quali sono i metodi di jQuery per lavorare con le dimensioni degli elementi.

Metodo	Descrizione
`.width()`	Restituisce o imposta la larghezza dell'elemento specificato.
`.height()`	Restituisce o imposta l'altezza dell'elemento specificato.
`.innerWidth()`	Restituisce la larghezza totale, compresa la larghezza del padding, dell'elemento specificato.
`.innerHeight()`	Restituisce l'altezza totale, compresa l'altezza del padding, dell'elemento specificato.
`.outerWidth()`	Restituisce la larghezza totale, compresa la larghezza del padding e del bordo, dell'elemento specificato.
`.outerHeight()`	Restituisce l'altezza totale, compresa l'altezza del padding e del bordo, dell'elemento specificato.

Vediamo questi metodi in dettaglio.

Com'è diviso un elemento HTML

Nell'immagine qui sotto, vediamo come è diviso un elemento HTML. È necessario per capire il funzionamento dei metodi jQuery per le dimensioni degli elementi.

I metodi .width() e .height()

I metodi .width() e .height() possono essere usati per recuperare la larghezza e l'altezza di un elemento, escludendo il padding, il bordo e il margine; oppure possono impostare una nuova larghezza o altezza ad un elemento.

Sintassi di .width():

Recuperare la larghezza: $(selettore).width().
Impostare una nuova larghezza: $(selettore).width(larghezza). La larghezza è in pixel.

<div id="el" style="background-color:red; width:100px">
  Esempio
</div>

<script>
  var larghezza = $("#el").width();
  alert("Larghezza:" + larghezza);

  // Nuova larghezza:
  $("#el").width(300);
</script>

Nell'esempio qui sopra, il <div> ha uno sfondo rosso (background-color:red) e una larghezza iniziale di 100px.

Sintassi di .height():

Recuperare l'altezza: $(selettore).height().
Impostare una nuova altezza: $(selettore).height(altezza). L'altezza è in pixel.

<div id="el" style="background-color:red; height:100px">
  Esempio
</div>

<script>
  var altezza = $("#el").height();
  alert("Altezza:" + altezza);

  // Nuova altezza:
  $("#el").height(300);
</script>

I metodi .innerWidth() e .innerHeight()

I metodi .innerWidth() e .innerHeight() possono essere usati per recuperare la larghezza e l'altezza di un elemento, includendo il padding, ma non il bordo e il margine; oppure possono impostare una nuova larghezza o altezza ad un elemento considerando il padding già presente.

Sintassi di .innerWidth():

Recuperare la larghezza: $(selettore).innerWidth().
Impostare una nuova larghezza: $(selettore).innerWidth(larghezza). La larghezza è in pixel.

<div id="el" style="background-color:red;width:100px;padding:10px">
  Esempio
</div>

<script>
  var larghezza = $("#el").innerWidth(); // 120px (100 + 10 + 10)
  // Nuova larghezza:
  $("#el").innerWidth(300); // 280px (300 - 10*2)
</script>

Nell'esempio, la larghezza è di 120px, in quanto il <div> ha una larghezza base di 100px, ma il padding è di 10px sia a destra che a sinistra (e quindi è 20px).

Sintassi di .innerHeight():

Recuperare l'altezza: $(selettore).innerHeight().
Impostare una nuova altezza: $(selettore).innerHeight(altezza). L'altezza è in pixel.

<div id="el" style="background-color:red;height:100px;padding:10px">
  Esempio
</div>

<script>
  var altezza = $("#el").innerHeight(); // 120px (100 + 10 + 10)
  // Nuova altezza:
  $("#el").innerHeight(300); // 280px (300 - 10*2)
</script>

I metodi .outerWidth() e .outerHeight()

I metodi .outerWidth() e .outerHeight() possono essere usati per recuperare la larghezza e l'altezza di un elemento, includendo il padding e il bordo, ma non il margine; oppure possono impostare una nuova larghezza o altezza ad un elemento considerando il padding e il bordo già presente.

Sintassi di .outerWidth():

Recuperare la larghezza: $(selettore).outerWidth().
Impostare una nuova larghezza: $(selettore).outerWidth(larghezza). La larghezza è in pixel.

<div id="el" style="background-color:red;width:100px;padding:10px;border:5px solid black">
  Esempio
</div>

<script>
  var larghezza = $("#el").outerWidth(); // Circa 130px (100 + 10*2 + 5*2)
  // Nuova larghezza:
  $("#el").outerWidth(300); // circa 270px (300 - 10*2 - 5*2)
</script>

Sintassi di .outerHeight():

Recuperare l'altezza: $(selettore).outerHeight().
Impostare una nuova altezza: $(selettore).outerHeight(altezza). L'altezza è in pixel.

<div id="el" style="background-color:red;height:100px;padding:10px;border:5px solid black">
  Esempio
</div>

<script>
  var altezza = $("#el").outerHeight(); // Circa 130px (100 + 10*2 + 5*2)
  // Nuova altezza:
  $("#el").outerHeight(300); // circa 270px (300 - 10*2 - 5*2)
</script>

Considerare anche i margini nel calcolo

Per considerare anche i margini dell'elemento, si può utilizzare .outerWidth(true) e .outerHeight(true). In questo modo, verrà compresa la larghezza/altezza, il padding, il bordo e il margine.

Larghezza e altezza della finestra del browser

Per conoscere l'altezza e la larghezza del browser dell'utente, si può utilizzare document come selettore. Ecco come:

$(document).width(); // Larghezza della finestra
$(document).height(); // Altezza della finestra

Prova!Completa gli spazi vuoti con il testo appropriato.

// Recupera l'altezza del <body> della pagina con jQuery
$("").();

Prova!Scegli l'opzione corretta tra quelle elencate.

// Recupera la larghezza di un elemento, considerando anche il suo padding
$("elemento").______();

	width
	outerWidth
	innerWidth