Proprietà HTML DOM offsetHeight
Esempio
Ottieni l'altezza e la larghezza di un elemento <div>, inclusi spaziatura interna e bordo:
var elmnt = document.getElementById("myDIV");
var txt = "Height with padding and border: " + elmnt.offsetHeight + "px<br>";
txt += "Width with padding and border: " + elmnt.offsetWidth + "px";
Altri esempi "Provalo da solo" di seguito.
Definizione e utilizzo
La proprietà offsetHeight restituisce l'altezza visualizzabile di un elemento in pixel, inclusi spaziatura interna, bordo e barra di scorrimento, ma non il margine.
Il motivo per cui viene specificata la parola "visualizzabile" è perché se il contenuto dell'elemento è più alto dell'altezza effettiva dell'elemento, questa proprietà restituirà solo l'altezza visibile (vedi "Altri esempi").
Nota: per comprendere questa proprietà, è necessario comprendere il CSS Box Model .
Suggerimento: questa proprietà viene spesso utilizzata insieme alla proprietà offsetWidth .
Suggerimento: utilizza le proprietà clientHeight e clientWidth per restituire l'altezza e la larghezza visualizzabili di un elemento, includendo solo il riempimento.
Suggerimento: per aggiungere barre di scorrimento a un elemento, utilizza la proprietà CSS overflow .
Questa proprietà è di sola lettura.
Supporto browser
| Property | |||||
|---|---|---|---|---|---|
| offsetHeight | Yes | Yes | Yes | Yes | Yes |
Sintassi
element.offsetHeight
Dettagli tecnici
| Valore di ritorno: | Un numero, che rappresenta l'altezza visualizzabile di un elemento in pixel, inclusi spaziatura interna, bordo e barra di scorrimento |
|---|
Altri esempi
Esempio
Questo esempio mostra la differenza tra clientHeight/clientWidth e offsetHeight/offsetWidth:
var elmnt = document.getElementById("myDIV");
var txt = "";
txt += "Height with padding: " + elmnt.clientHeight + "px<br>";
txt += "Height with padding and border: " + elmnt.offsetHeight + "px<br>";
txt += "Width with padding: " + elmnt.clientWidth + "px<br>";
txt += "Width with padding and border: " + elmnt.offsetWidth + "px";
Esempio
Questo esempio mostra la differenza tra clientHeight/clientWidth e offsetHeight/offsetWidth, quando aggiungiamo una barra di scorrimento all'elemento:
var elmnt = document.getElementById("myDIV");
var txt = "";
txt += "Height with padding: " + elmnt.clientHeight + "px<br>";
txt += "Height with padding, border and scrollbar: " + elmnt.offsetHeight + "px<br>";
txt += "Width with padding: " + elmnt.clientWidth + "px<br>";
txt += "Width with padding, border and scrollbar: " + elmnt.offsetWidth + "px";