Proprietà offsetHeight dell'elemento DOM HTML

Definizione e uso

offsetHeight La proprietà restituisce l'altezza visibile dell'elemento (in pixel), inclusi i margini interni, i bordi e le barre di scorrimento, ma escludendo i margini esterni.

offsetHeight Le proprietà sono di sola lettura.

Vedi anche:Tutorial del modello di finestra CSS

offsetParent

Tutti gli elementi bloccanti riportano l'offset rispetto al genitore di offset:

  • offsetTop
  • offsetLeft
  • offsetWidth
  • offsetHeight

Il genitore di offset è il più vicino antenato con posizione non statica.

Se non esiste un genitore di offset, l'offset è rispetto al corpo del documento.

Vedi anche:

Proprietà offsetWidth

Proprietà offsetParent

Proprietà offsetTop

Proprietà offsetLeft

Proprietà clientTop

Proprietà clientLeft

Proprietà clientWidth

Proprietà clientHeight

Esempio

Esempio 1

Mostra l'altezza e la larghezza di "myDIV", inclusi i margini interni e i bordi:

const elmnt = document.getElementById("myDIV");
let text = "Altezza con spaziatura e bordo: " + elmnt.offsetHeight + "px<br>";
text += "Larghezza con padding e border: " + elmnt.offsetWidth + "px";

Prova tu stesso

Esempio 2

Differenza tra clientHeight/clientWidth e offsetHeight/offsetWidth

Con barra di scorrimento:

const elmnt = document.getElementById("myDIV");
let text = "";
text += "Altezza con padding: " + elmnt.clientHeight + "px<br>";
text += "Altezza con padding e border: " + elmnt.offsetHeight + "px<br>";
text += "Larghezza con padding: " + elmnt.clientWidth + "px<br>";
text += "Larghezza con padding e border: " + elmnt.offsetWidth + "px";

Prova tu stesso

Senza barra di scorrimento:

const elmnt = document.getElementById("myDIV");
let text = "";
text += "Altezza con padding: " + elmnt.clientHeight + "px<br>";
text += "Altezza con padding, border e scrollbar: " + elmnt.offsetHeight + "px<br>";
text += "Larghezza con padding: " + elmnt.clientWidth + "px<br>";
text += "Larghezza con padding, border e scrollbar: " + elmnt.offsetWidth + "px";

Prova tu stesso

Sintassi

element.offsetHeight

Valore di ritorno

Tipo Descrizione
Numero Altezza visibile dell'elemento (in pixel), inclusi i margini interni, i bordi e le barre di scorrimento.

Supporto del browser

Tutti i browser supportano element.offsetHeight:

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
Supporto Supporto Supporto Supporto Supporto Supporto