Gli ultimi tutorial di sviluppo web
 

HTML DOM clientHeight Propery

<Oggetto Element

Esempio

Ottenere l'altezza e la larghezza di un <div> elemento, tra cui padding:

var elmnt = document.getElementById("myDIV");
var txt = "Height with padding: " + elmnt.clientHeight + "px<br>";
txt += "Width with padding: " + elmnt.clientWidth + "px";

Il risultato di txt sarà:

Height with padding: 270px
Width with padding: 420px
Prova tu stesso "

Più "Try it Yourself" esempi di seguito.

Definizione e l'utilizzo

Il clientHeight proprietà restituisce il visualizzabile altezza di un elemento in pixel, compreso padding, ma non il confine, barra di scorrimento o un margine.

Il motivo per cui il "viewable" è specificato parola, è perché se il contenuto dell'elemento è più alto rispetto all'altezza effettiva dell'elemento, questa proprietà sarà solo tornare l'altezza che è visibile (See "More Examples") .

Nota: Per capire questa proprietà, è necessario comprendere il modello CSS Box .

Suggerimento: Questa struttura è spesso usato insieme al clientWidth proprietà.

Suggerimento: utilizzare i offsetHeight e offsetWidth oggetti da restituire l'altezza e la larghezza visibile di un elemento, inclusi padding, bordo e barra di scorrimento.

Suggerimento: per aggiungere barre di scorrimento per un elemento, utilizzare il CSS di overflow proprietà.

Questa proprietà è di sola lettura.

Supporto browser

Proprietà
clientHeight sì sì sì sì sì

Sintassi

element .clientHeight

Dettagli tecnici

Valore di ritorno: Un numero, che rappresenta l'altezza visibile di un elemento in pixel, tra imbottitura
Esempi

Altri esempi

Esempio

Questo esempio dimostra 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";

Il risultato di txt sarà:

Height with padding: 270px
Height with padding and border: 280px
Width with padding: 420px
Width with padding and border: 430px
Prova tu stesso "

Esempio

Questo esempio dimostra la differenza tra clientHeight / clientWidth e offsetHeight / offsetWidth, quando si aggiunge una barra di scorrimento per l'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";

Il risultato di txt sarà:

Height with padding: 249px
Height with padding, border and scrollbar: 280px
Width with padding: 399px
Width with padding, border and scrollbar: 430px
Prova tu stesso "

<Oggetto Element