Los últimos tutoriales de desarrollo web
 

HTML DOM clientHeight Propery

<Elemento de objeto

Ejemplo

Obtener la altura y la anchura de un <div> elemento, incluido el relleno:

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

El resultado de txt será:

Height with padding: 270px
Width with padding: 420px
Inténtalo tú mismo "

Más "Try it Yourself" ejemplos a continuación.

Definición y Uso

La propiedad clientHeight devuelve la altura visible de un elemento en píxeles, incluyendo las protecciones, pero no la frontera, barra de desplazamiento o margen.

La razón por la cual la "viewable" se especifica la palabra, es porque si el contenido del elemento es más alto que la altura real del elemento, esta propiedad sólo devolverá la altura que es visible (See "More Examples") .

Nota: Para entender esta propiedad, usted debe entender el modelo de caja CSS .

Consejo: Esta propiedad se utiliza a menudo junto con el clientWidth propiedad.

Consejo: Utilice los offsetHeight y offsetWidth propiedades para volver visible la altura y el ancho de un elemento, incluyendo relleno, borde y la barra de desplazamiento.

Consejo: Para añadir barras de desplazamiento a un elemento, utilice el CSS desbordamiento de propiedad.

Esta propiedad es de solo lectura.

Soporte del navegador

Propiedad
clientHeight Sí Sí Sí Sí Sí

Sintaxis

element .clientHeight

Detalles técnicos

Valor de retorno: Un número, que representa la altura visible de un elemento en píxeles, incluyendo las protecciones
Ejemplos

Más ejemplos

Ejemplo

Este ejemplo demuestra la diferencia entre clientHeight / clientWidth y 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";

El resultado de txt será:

Height with padding: 270px
Height with padding and border: 280px
Width with padding: 420px
Width with padding and border: 430px
Inténtalo tú mismo "

Ejemplo

Este ejemplo demuestra la diferencia entre clientHeight / clientWidth y offsetHeight / offsetWidth, cuando añadimos una barra de desplazamiento al 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";

El resultado de txt será:

Height with padding: 249px
Height with padding, border and scrollbar: 280px
Width with padding: 399px
Width with padding, border and scrollbar: 430px
Inténtalo tú mismo "

<Elemento de objeto