HTML DOM clientHeight Propiedad

元素对象参考手册Objeto elemento

Ejemplo

Obtener la altura del elemento div, incluyendo el relleno (padding):

var elmnt = document.getElementById("myDIV"); var txt = "Altura del elemento div, incluyendo el relleno (padding):" + elmnt.clientHeight + "px<br>"; txt += "Ancho del elemento div, incluyendo el relleno (padding):" + elmnt.clientWidth + "px";

Pruébelo »

Definición y uso

La propiedad clientHeight es una propiedad de solo lectura que devuelve la altura en píxeles del elemento. La altura incluye el relleno (padding), pero no incluye el borde (border), el margen (margin) ni la barra de desplazamiento. Es un número entero, en píxeles (px).

clientHeight se puede calcular mediante CSS height + CSS padding - altura de la barra de desplazamiento horizontal (si existe).

Para el objeto body del documento, incluye la altura total del contenido en lugar de la altura CSS del elemento. Se ignora la altura del contenido extendido hacia abajo de los elementos flotantes.

Nota:Para comprender esta propiedad, consulteModelo de caja CSS。

Consejo:Esta propiedad generalmente se usa junto con laclientWidthpropiedad.

Consejo:Use la offsetHeightyoffsettWidthpropiedad para devolver la altura y el ancho visibles del elemento, incluyendo el relleno (padding) y el borde (border).

Consejo:Para agregar una barra de desplazamiento a un elemento, puede usar laoverflowpropiedad.

Esta es una propiedad de solo lectura.


Compatibilidad del navegador

Propiedad
clientHeight Yes Yes Yes Yes Yes

Sintaxis

element.clientHeight 

Detalles técnicos

Valor de retorno: Devuelve un número entero que representa la altura en píxeles del elemento.

Más ejemplos

Ejemplo

El siguiente ejemplo demuestra la diferencia entre las propiedades clientHeight/clientWidth y offsetHeight/offsetWidth:

var elmnt = document.getElementById("myDIV"); var txt = ""; txt += "Altura incluyendo el relleno (padding):" + elmnt.clientHeight + "px<br>"; txt += "Altura incluyendo el relleno (padding) y el borde (border):" + elmnt.offsetHeight + "px<br>"; txt += "Ancho incluyendo el relleno (padding):" + elmnt.clientWidth + "px<br>"; txt += "Ancho incluyendo el relleno (padding) y el borde (border):" + elmnt.offsetWidth + "px";

Pruébelo »

Ejemplo

El siguiente ejemplo demuestra la diferencia entre las propiedades clientHeight/clientWidth y offsetHeight/offsetWidth después de agregar una barra de desplazamiento al elemento:

var elmnt = document.getElementById("myDIV"); var txt = ""; txt += "<b>Información de estilo del div:</b><br>"; txt += "Altura incluyendo el relleno (padding):" + elmnt.clientHeight + "px<br>"; txt += "Altura incluyendo el relleno (padding), el borde (border) y la barra de desplazamiento:" + elmnt.offsetHeight + "px<br>"; txt += "Ancho incluyendo el relleno (padding):" + elmnt.clientWidth + "px<br>"; txt += "Ancho incluyendo el relleno (padding), el borde (border) y la barra de desplazamiento:" + elmnt.offsetWidth + "px";

Pruébelo »


元素对象参考手册Objeto elemento

Otras extensiones