Proprietà clientHeight dell'elemento HTML DOM

Definizione e uso

clientHeight L'attributo restituisce l'altezza visibile dell'elemento, inclusi i margini interni, ma escludendo i bordi, le barre di scorrimento o i margini esterni, in pixel.

clientHeight L'attributo è readonly.

Vedi anche:Tutorial CSS Box Model

Vedi anche:

proprietà clientWidth

proprietà clientTop

proprietà clientLeft

proprietà offsetHeight

proprietà offsetWidth

Per aggiungere una barra di scorrimento all'elemento, utilizzare Proprietà overflow CSS.

Esempio

Esempio 1

Ottieni altezza e larghezza di "myDIV", inclusi i margini interni:

const element = document.getElementById("myDIV");
let text = "clientHeight: " + element.clientHeight + "px<br>";
text += "clientWidth: " + element.clientWidth + "px";

Prova tu stesso

Esempio 2: differenza tra clientHeight/clientWidth e offsetHeight/offsetWidth

Senza barra di scorrimento:

const element = document.getElementById("myDIV");
let text = "";
text += "clientHeight: " + element.clientHeight + "px<br>";
text += "offsetHeight: " + element.offsetHeight + "px<br>";
text += "clientWidth: " + element.clientWidth + "px<br>";
text += "offsetWidth: " + element.offsetWidth + "px";

Prova tu stesso

Con barra di scorrimento:

const element = document.getElementById("myDIV");
let text = "";
text += "clientHeight: " + element.clientHeight + "px<br>";
text += "offsetHeight: " + element.offsetHeight + "px<br>";
text += "clientWidth: " + element.clientWidth + "px<br>";
text += "offsetWidth: " + element.offsetWidth + "px";

Prova tu stesso

Sintassi

element.clientHeight

Valore di ritorno

Tipo Descrizione
Numero Altezza visibile dell'elemento (in pixel), inclusi i margini interni.

Supporto del browser

Tutti i browser supportano element.clientHeight:

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