Obtenha a altura do elemento div em JavaScript

Para obter a altura de um elemento <div> com JavaScript no navegador, selecione-o e leia a medida adequada ao que você precisa: clientHeight para a área interna, offsetHeight para a caixa com bordas, scrollHeight para o conteúdo incluindo o que excede a área visível ou getBoundingClientRect().height para a altura do retângulo renderizado. Cada propriedade mede partes diferentes do elemento, por isso os valores podem variar.

O exemplo executável abaixo representa uma caixa de conteúdo de 50px, com 4px de preenchimento e borda de 1px. Ele roda no Node, sem o DOM de um navegador, e exibe as medidas correspondentes. No navegador, leia essas mesmas propriedades no elemento DOM selecionado.

const element = {
  contentHeight: 50,
  padding: 4,
  border: 1,
  get clientHeight() {
    return this.contentHeight + 2 * this.padding;
  },
  get offsetHeight() {
    return this.clientHeight + 2 * this.border;
  },
  get scrollHeight() {
    return this.clientHeight;
  },
  getBoundingClientRect() {
    return { height: this.offsetHeight };
  }
};

console.log('clientHeight:', element.clientHeight);
console.log('offsetHeight:', element.offsetHeight);
console.log('scrollHeight:', element.scrollHeight);
console.log('bounding height:', element.getBoundingClientRect().height);

clientHeight: 58
offsetHeight: 60
scrollHeight: 58
bounding height: 60

Medir a altura de um div em JavaScript

Use o DOM para selecionar um elemento existente pelo ID e, em seguida, escolha uma das medidas abaixo. O exemplo em Node acima representa os valores para a caixa descrita; para medir um elemento na sua página, substitua element pelo resultado de document.getElementById('container') ou de outro seletor. Leia as dimensões quando o elemento já estiver no documento e o layout estiver disponível.

Escolha a medida conforme a caixa que você precisa: use clientHeight para a área interna, offsetHeight quando as bordas devem entrar no resultado, scrollHeight quando precisar da altura total do conteúdo para rolagem e getBoundingClientRect().height quando o retângulo renderizado for relevante. Nenhuma dessas medidas inclui margens; se o espaçamento fizer parte do cálculo, meça separadamente o intervalo pertinente no layout. Os valores são expressos em pixels CSS, não em pixels físicos da tela.

clientHeight

clientHeight é a altura interna em pixels CSS: inclui o preenchimento superior e inferior, mas exclui bordas e margens. No exemplo, com 50px de conteúdo e 4px de preenchimento em cada lado, o valor é 58. Essa propriedade retorna um número inteiro.

offsetHeight

offsetHeight inclui o conteúdo, o preenchimento, as bordas e qualquer barra de rolagem horizontal do elemento. Exclui as margens. No exemplo, o cálculo é 50 + 8 + 2 = 60 pixels. Essa propriedade também retorna um número inteiro.

scrollHeight

scrollHeight mede a altura total do conteúdo, incluindo a parte que ultrapassa a área visível quando há conteúdo excedente. Inclui o preenchimento, mas exclui bordas e margens. No exemplo, o valor é 58 porque o conteúdo não ultrapassa a área visível. Em uma página com conteúdo excedente, esse valor pode ser maior que clientHeight. É uma medida inteira e não se deve presumir que ela seja igual a clientHeight em todos os layouts.

getBoundingClientRect()

getBoundingClientRect() retorna um retângulo que descreve o tamanho e a posição renderizados do elemento em relação à janela de visualização. Leia a propriedade height para obter a altura renderizada. Ela inclui o preenchimento e as bordas, então o valor no exemplo é 60 pixels. Ao contrário das propriedades de dimensão inteira acima, essa altura pode ser fracionária, por exemplo, quando o layout ou as transformações produzem dimensões subpixel. Use esse método quando precisar do retângulo renderizado, em vez da altura rolável do conteúdo.