Elemento HTML DOM clientHeight
❮ L'oggetto elementoEsempio
Ottieni l'altezza e la larghezza di "myDIV", incluso il riempimento:
const elmnt = document.getElementById("myDIV");
let text = "Height with padding: " + elmnt.clientHeight + "px<br>";
text += "Width with padding: " + elmnt.clientWidth + "px";
Altri esempi di seguito.
Definizione e utilizzo
La clientHeight
proprietà restituisce l'altezza visualizzabile di un elemento in pixel, incluso il riempimento, ma non il bordo, la barra di scorrimento o il margine.
La clientHeight
proprietà è di sola lettura.
Esercitazione:
Guarda anche:
La proprietà dell'elemento clientWidth
La proprietà offsetHeight dell'elemento
La proprietà offsetWidth dell'elemento
Per aggiungere barre di scorrimento a un elemento, utilizza la proprietà CSS overflow .
Sintassi
element.clientHeight
Valore di ritorno
Tipo | Descrizione |
Numero | L'altezza visualizzabile dell'elemento (in pixel), inclusa la spaziatura interna |
La differenza tra clientHeight/clientWidth e offsetHeight/offsetWidth
Senza una barra di scorrimento:
const elmnt = document.getElementById("myDIV");
let text = "";
text += "Height with padding: " + elmnt.clientHeight + "px<br>";
text += "Height with padding and border: " + elmnt.offsetHeight + "px<br>";
text += "Width with padding: " + elmnt.clientWidth + "px<br>";
text += "Width with padding and border: " + elmnt.offsetWidth + "px";
Con una barra di scorrimento:
const elmnt = document.getElementById("myDIV");
let text = "";
text += "Height with padding: " + elmnt.clientHeight + "px<br>";
text += "Height with padding, border and scrollbar: " + elmnt.offsetHeight + "px<br>";
text += "Width with padding: " + elmnt.clientWidth + "px<br>";
text += "Width with padding, border and scrollbar: " + elmnt.offsetWidth + "px";
Supporto browser
element.clientHeight
è supportato in tutti i browser:
Chrome | IE | Edge | Firefox | Safari | Opera |
Yes | Yes | Yes | Yes | Yes | Yes |
❮ L'oggetto elemento