Atributo offsetHeight del elemento DOM HTML

Definición y uso

offsetHeight El atributo devuelve la altura visible del elemento (en píxeles), incluyendo el relleno, el borde y la barra de desplazamiento, pero no la márgen.

offsetHeight El atributo es de solo lectura.

Por favor, consulte:Tutoriales sobre el modelo de cuadro CSS

offsetParent

Todos los elementos de bloques informan sobre el desplazamiento en relación con el padre de desplazamiento:

  • offsetTop
  • offsetLeft
  • offsetWidth
  • offsetHeight

El padre de desplazamiento se refiere al ancestro más cercano que tiene una posición no estática.

Si no existe el padre de desplazamiento, el desplazamiento es relativo al texto principal del documento.

Por favor, consulte:

Atributo offsetWidth

Atributo offsetParent

Atributo offsetTop

Atributo offsetLeft

Atributo clientTop

Atributo clientLeft

Atributo clientWidth

Atributo clientHeight

Ejemplo

Ejemplo 1

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

const elmnt = document.getElementById("myDIV");
let text = "Altura con relleno y borde: " + elmnt.offsetHeight + "px<br>";
text += "Ancho con relleno y borde: " + elmnt.offsetWidth + "px";

Intente hacerlo usted mismo

Ejemplo 2

La diferencia entre clientHeight/clientWidth y offsetHeight/offsetWidth

Con barra de desplazamiento:

const elmnt = document.getElementById("myDIV");
let text = "";
text += "Altura con relleno: " + elmnt.clientHeight + "px<br>";
text += "Altura con relleno y borde: " + elmnt.offsetHeight + "px<br>";
text += "Ancho con relleno: " + elmnt.clientWidth + "px<br>";
text += "Ancho con relleno y borde: " + elmnt.offsetWidth + "px";

Intente hacerlo usted mismo

Sin barra de desplazamiento:

const elmnt = document.getElementById("myDIV");
let text = "";
text += "Altura con relleno: " + elmnt.clientHeight + "px<br>";
text += "Altura con relleno, borde y barra de desplazamiento: " + elmnt.offsetHeight + "px<br>";
text += "Ancho con relleno: " + elmnt.clientWidth + "px<br>";
text += "Ancho con relleno, borde y barra de desplazamiento: " + elmnt.offsetWidth + "px";

Intente hacerlo usted mismo

Sintaxis

element.offsetHeight

Valor devuelto

Tipo Descripción
Número Altura visible del elemento (en píxeles), incluyendo la márgen interna, el borde y la barra de desplazamiento.

Compatibilidad del navegador

Todos los navegadores lo admiten element.offsetHeight:

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