Altura del cliente del elemento HTML DOM
❮ El Objeto ElementoEjemplo
Obtenga la altura y el ancho de "myDIV", incluido el relleno:
const elmnt = document.getElementById("myDIV");
let text = "Height with padding: " + elmnt.clientHeight + "px<br>";
text += "Width with padding: " + elmnt.clientWidth + "px";
Más ejemplos a continuación.
Definición y uso
La clientHeight
propiedad devuelve la altura visible de un elemento en píxeles, incluido el relleno, pero no el borde, la barra de desplazamiento o el margen.
La clientHeight
propiedad es de solo lectura.
Tutorial:
Ver también:
La propiedad clientWidth del elemento
La propiedad offsetHeight del elemento
La propiedad offsetWidth del elemento
Para agregar barras de desplazamiento a un elemento, use la propiedad de desbordamiento de CSS .
Sintaxis
element.clientHeight
Valor devuelto
Escribe | Descripción |
Número | La altura visible del elemento (en píxeles), incluido el relleno |
La diferencia entre clientHeight/clientWidth y offsetHeight/offsetWidth
Sin barra de desplazamiento:
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 de desplazamiento:
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";
Compatibilidad con navegador
element.clientHeight
es compatible con todos los navegadores:
Chrome | IE | Edge | Firefox | Safari | Opera |
Yes | Yes | Yes | Yes | Yes | Yes |
❮ El Objeto Elemento