Atributo offsetHeight do Elemento DOM HTML

Definição e uso

offsetHeight O atributo retorna a altura visível do elemento (em pixels), incluindo preenchimento, borda e barra de rolagem, mas não margem externa.

offsetHeight O atributo é de leitura apenas.

Veja também:Tutorial de modelo de caixa CSS

offsetParent

Todos os elementos de bloco relatam o deslocamento em relação ao pai de offset:

  • offsetTop
  • offsetLeft
  • offsetWidth
  • offsetHeight

Pai de offset é o ancestral mais próximo com posição não estática.

Se não houver pai de offset, o deslocamento é em relação ao corpo do documento.

Veja também:

Atributo offsetWidth

Atributo offsetParent

Atributo offsetTop

Atributo offsetLeft

Atributo clientTop

Atributo clientLeft

Atributo clientWidth

Atributo clientHeight

Exemplo

Exemplo 1

Exibe a altura e largura do "myDIV", incluindo o preenchimento e a borda:

const elmnt = document.getElementById("myDIV");
let text = "Altura com preenchimento e borda: " + elmnt.offsetHeight + "px<br>";
text += "Largura com preenchimento e borda: " + elmnt.offsetWidth + "px";

Experimente você mesmo

Exemplo 2

Diferença entre clientHeight/clientWidth e offsetHeight/offsetWidth

Com barra de rolagem:

const elmnt = document.getElementById("myDIV");
let text = "";
text += "Altura com preenchimento: " + elmnt.clientHeight + "px<br>";
text += "Altura com preenchimento e borda: " + elmnt.offsetHeight + "px<br>";
text += "Largura com preenchimento: " + elmnt.clientWidth + "px<br>";
text += "Largura com preenchimento e borda: " + elmnt.offsetWidth + "px";

Experimente você mesmo

Sem barra de rolagem:

const elmnt = document.getElementById("myDIV");
let text = "";
text += "Altura com preenchimento: " + elmnt.clientHeight + "px<br>";
text += "Altura com preenchimento, borda e barra de rolagem: " + elmnt.offsetHeight + "px<br>";
text += "Largura com preenchimento: " + elmnt.clientWidth + "px<br>";
text += "Largura com preenchimento, borda e barra de rolagem: " + elmnt.offsetWidth + "px";

Experimente você mesmo

Sintaxe

element.offsetHeight

Retorno

Tipo Descrição
Número Altura visual do elemento (em pixels), incluindo margem interna, borda e barra de rolagem.

Suporte do navegador

Todos os navegadores suportam element.offsetHeight:

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
Suporte Suporte Suporte Suporte Suporte Suporte