Propiedad clientHeight del elemento HTML DOM

Definición y uso

clientHeight La propiedad devuelve la altura visible del elemento, incluyendo el relleno, pero no incluye el borde, la barra de desplazamiento o el margen, en píxeles.

clientHeight La propiedad es de solo lectura.

Vea también:Tutoriales sobre el modelo de cuadro CSS

Vea también:

propiedad clientWidth

propiedad clientTop

propiedad clientLeft

propiedad offsetHeight

propiedad offsetWidth

Si desea agregar una barra de desplazamiento al elemento, utilice Atributo overflow de CSS.

Ejemplo

Ejemplo 1

Obtener la altura y anchura de "myDIV", incluyendo el relleno:

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

Prueba por tu cuenta

Ejemplo 2: Diferencia entre clientHeight/clientWidth y offsetHeight/offsetWidth

Sin barra de desplazamiento:

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";

Prueba por tu cuenta

Con barra de desplazamiento:

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";

Prueba por tu cuenta

Sintaxis

element.clientHeight

Valor de retorno

Tipo Descripción
Número Altura visible del elemento (en píxeles), incluyendo el relleno.

Compatibilidad del navegador

Todos los navegadores lo admiten element.clientHeight:

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
Soporte Soporte Soporte Soporte Soporte Soporte