Pesquisa de site

html - Obter altura de div com JavaScript puro

Alguma ideia de como obter a altura de um div sem usar jQuery?

Eu estava procurando no Stack Overflow por esta pergunta e parece que toda resposta está apontando para o .height() do jQuery.

Tentei algo como myDiv.style.height, mas não retornou nada, mesmo quando meu div tinha seu width e height definidos no CSS.

Resposta #1

var clientHeight = document.getElementById('myDiv').clientHeight;

ou

var offsetHeight = document.getElementById('myDiv').offsetHeight;

clientHeight inclui o preenchimento.

offsetHeight inclui padding, barra de rolagem e bordas.

Resposta #2

Outra opção é usar a função getBoundingClientRect. Por favor, note que getBoundingClientRect retornará um retângulo vazio se o display do elemento for 'none'.

Exemplo :

var elem = document.getElementById("myDiv");
if(elem) {
  var rect = elem.getBoundingClientRect();
  console.log("height: " + rect.height);  
}

ATUALIZAÇÃO: Aqui está o mesmo código escrito em 2020:

const elem = document.querySelector("#myDiv");
if(elem) {
  const rect = elem.getBoundingClientRect();
  console.log(`height: ${rect.height}`);
}

Resposta #3

jsFiddle

var element = document.getElementById('element');
alert(element.offsetHeight);

Resposta #4

  1. HTMLElement.style - retorna o estilo definido do elemento
  2. alturaDoCliente - altura + preenchimento
  3. offsetHeight - altura + preenchimento + bordas
  4. scrollHeight - retorna altura + preenchimento
  5. getBoundingClientRect() - retorna as propriedades left, top, right, bottom, x, y, width e height
  6. getComputedStyle() - retorna todas as propriedades CSS de um elemento

// returns defined Style of element
const styleHeight = document.getElementById('myDiv').style.height;
console.log('style Height : ', styleHeight);

// height + padding
const clientHeight = document.getElementById('myDiv').clientHeight;
console.log('client Height : ', clientHeight);

// height + padding + borders
const offsetHeight = document.getElementById('myDiv').offsetHeight;
console.log('offset Height : ', offsetHeight);

// height + padding
const scrollHeight = document.getElementById('myDiv').scrollHeight;
console.log('scroll Height : ', scrollHeight);

// return left, top, right, bottom, x, y, width, and height properties
const getBoundingClientRectHeight = document.getElementById('myDiv').getBoundingClientRect().height;
console.log('get Bounding Client Rect Height : ', getBoundingClientRectHeight);

// returns all CSS properties of an element
const styleElementHeight = getComputedStyle(document.getElementById("myDiv")).height;
console.log('style Element Height : ', styleElementHeight);
<div id="myDiv" style="margin:10px;padding:20px;height:200px;">
    <input type="Text">
    <input type="button" value="submit">
</div>

Resposta #5

var myDiv = document.getElementById('myDiv'); //get #myDiv
alert(myDiv.clientHeight);

clientHeight e clientWidth são o que você está procurando.

offsetHeight e offsetWidth também retornam a altura e a largura, mas incluem a borda e a barra de rolagem. Dependendo da situação, você pode usar um ou outro.

Espero que isso ajude.

Artigos relacionados