Propiedad HTML DOM offsetHeight
Ejemplo
Obtenga la altura y el ancho de un elemento <div>, incluido el relleno y el borde:
var elmnt = document.getElementById("myDIV");
var txt = "Height with padding and border: " + elmnt.offsetHeight + "px<br>";
txt += "Width with padding and border: " + elmnt.offsetWidth + "px";
Más ejemplos de "Pruébelo usted mismo" a continuación.
Definición y uso
La propiedad offsetHeight devuelve la altura visible de un elemento en píxeles, incluido el relleno, el borde y la barra de desplazamiento, pero no el margen.
La razón por la que se especifica la palabra "visible" es porque si el contenido del elemento es más alto que la altura real del elemento, esta propiedad solo devolverá la altura que es visible (consulte "Más ejemplos").
Nota: Para comprender esta propiedad, debe comprender el modelo de caja CSS .
Sugerencia: esta propiedad se usa a menudo junto con la propiedad offsetWidth .
Sugerencia: use las propiedades clientHeight y clientWidth para devolver la altura y el ancho visibles de un elemento, incluido solo el relleno.
Sugerencia: para agregar barras de desplazamiento a un elemento, use la propiedad de desbordamiento de CSS .
Esta propiedad es de sólo lectura.
Compatibilidad con navegador
| Property | |||||
|---|---|---|---|---|---|
| offsetHeight | Yes | Yes | Yes | Yes | Yes |
Sintaxis
element.offsetHeight
Detalles técnicos
| Valor devuelto: | Un número, que representa la altura visible de un elemento en píxeles, incluido el relleno, el borde y la barra de desplazamiento. |
|---|
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";
Ejemplo
Este ejemplo demuestra la diferencia entre clientHeight/clientWidth y offsetHeight/offsetWidth, cuando agregamos 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";