logo Dove iniziare Linguaggi Aiuto Blog
Home Dove iniziare Linguaggi Aiuto e Supporto Info e Blog

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.

MetodoDescrizione
.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.

Come è diviso un elemento HTML

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").______();