Como você obtém a altura renderizada de um elemento?

Como você obtém a altura renderizada de um elemento?

Digamos que você tenha um elemento

com algum conteúdo interno. Este conteúdo dentro vai esticar a altura do

. Como você obtém a altura “renderizada” quando não definiu explicitamente a altura. Obviamente, tentei:

 var h = document.getElementById('someDiv').style.height; 

Existe um truque para fazer isso? Eu estou usando jQuery, se isso ajuda.

Deve ser apenas

 $('#someDiv').height(); 

com jQuery. Isso recupera a altura do primeiro item no conjunto empacotado como um número.

Tentando usar

 .style.height 

só funciona se você tiver definido a propriedade em primeiro lugar. Não é muito útil!

Experimente um dos seguintes:

 var h = document.getElementById('someDiv').clientHeight; var h = document.getElementById('someDiv').offsetHeight; var h = document.getElementById('someDiv').scrollHeight; 

clientHeight inclui a altura e o preenchimento vertical.

offsetHeight inclui a altura, o preenchimento vertical e as bordas verticais.

scrollHeight inclui a altura do documento contido (seria maior que a altura em caso de rolagem), preenchimento vertical e bordas verticais.

NON JQUERY desde que havia um monte de links usando elem.style.height no topo dessas respostas …

ALTURA INTERNA
https://developer.mozilla.org/pt-BR/docs/Web/API/Element.clientHeight

 document.getElementById(id_attribute_value).clientHeight; 

ALTURA EXTERNA
https://developer.mozilla.org/pt-BR/docs/Web/API/HTMLElement.offsetHeight

 document.getElementById(id_attribute_value).offsetHeight; 

Ou uma das minhas referências favoritas: http://youmightnotneedjquery.com/

Você pode usar .outerHeight() para essa finalidade.

Ele lhe dará a altura completa do elemento. Além disso, você não precisa definir nenhuma css-height do elemento. Por precaução, você pode manter sua altura automática para que possa ser renderizada de acordo com a altura do conteúdo.

 //if you need height of div excluding margin/padding/border $('#someDiv').height(); //if you need height of div with padding but without border + margin $('#someDiv').innerHeight(); // if you need height of div including padding and border $('#someDiv').outerHeight(); //and at last for including border + margin + padding, can use $('#someDiv').outerHeight(true); 

Para uma visão clara dessas funções, você pode acessar o site do jQuery ou um post detalhado aqui .

isso limpará a diferença entre .height() / innerHeight() / outerHeight()

 style = window.getComputedStyle(your_element); 

então simplesmente: style.height

Definitivamente use

 $('#someDiv').height() // to read it 

ou

 $('#someDiv').height(newHeight) // to set it 

Estou postando isso como uma resposta adicional, porque há algumas coisas importantes que acabei de aprender.

Eu quase caí na armadilha agora de usar o offsetHeight. Isso é o que aconteceu :

  • Eu usei o bom e velho truque de usar um depurador para “observar” quais propriedades meu elemento tinha
  • Eu vi qual deles tem um valor em torno do valor que eu estava esperando
  • Foi offsetHeight – então eu usei isso.
  • Então eu percebi que não funcionava com um DIV oculto
  • Eu tentei me esconder depois de calcular maxHeight, mas isso parecia desajeitado – entrou em uma confusão.
  • Eu fiz uma pesquisa – descobri jQuery.height () – e usei
  • descobriu altura () funciona até mesmo em elementos ocultos
  • apenas por diversão eu verifiquei a implementação jQuery de altura / largura

Aqui está apenas uma parte:

 Math.max( Math.max(document.body["scroll" + name], document.documentElement["scroll" + name]), Math.max(document.body["offset" + name], document.documentElement["offset" + name]) ) 

Sim, olha para ambos, scroll e offset. Se isso falhar, parece ainda mais, tendo em conta os problemas de compatibilidade do navegador e CSS. Em outras palavras, eu não me importo – ou quero.

Mas eu não preciso. Obrigado jQuery!

Moral da história: se o jQuery tiver um método para algo provavelmente por um bom motivo, provavelmente relacionado à compatibilidade.

Se você ainda não leu a lista de methods do jQuery, sugiro que dê uma olhada.

Eu fiz um código simples que nem precisa do JQuery e provavelmente vai ajudar algumas pessoas. Obtém a altura total de ‘ID1’ depois de carregada e usa-a no ‘ID2’

 function anyName(){ var varname=document.getElementById('ID1').offsetHeight; document.getElementById('ID2').style.height=varname+'px'; } 

Em seguida, basta definir o corpo para carregá-lo

  

Então esta é a resposta?

“Se você precisar calcular alguma coisa, mas não mostrá-la, defina o elemento como visibility:hidden e position:absolute , adicione-o à tree DOM, pegue o offsetHeight e remova-o. (Isso é o que a biblioteca de protótipos faz por trás das linhas vez que eu verifiquei).

Eu tenho o mesmo problema em vários elementos. Não há nenhum jQuery ou Prototype para ser usado no site, mas sou a favor de tomar emprestada a técnica se ela funcionar. Como um exemplo de algumas coisas que não funcionaram, seguidas pelo que fiz, tenho o seguinte código:

 // Layout Height Get function fnElementHeightMaxGet(DoScroll, DoBase, elementPassed, elementHeightDefault) { var DoOffset = true; if (!elementPassed) { return 0; } if (!elementPassed.style) { return 0; } var thisHeight = 0; var heightBase = parseInt(elementPassed.style.height); var heightOffset = parseInt(elementPassed.offsetHeight); var heightScroll = parseInt(elementPassed.scrollHeight); var heightClient = parseInt(elementPassed.clientHeight); var heightNode = 0; var heightRects = 0; // if (DoBase) { if (heightBase > thisHeight) { thisHeight = heightBase; } } if (DoOffset) { if (heightOffset > thisHeight) { thisHeight = heightOffset; } } if (DoScroll) { if (heightScroll > thisHeight) { thisHeight = heightScroll; } } // if (thisHeight == 0) { thisHeight = heightClient; } // if (thisHeight == 0) { // Dom Add: // all else failed so use the protype approach... var elBodyTempContainer = document.getElementById('BodyTempContainer'); elBodyTempContainer.appendChild(elementPassed); heightNode = elBodyTempContainer.childNodes[0].offsetHeight; elBodyTempContainer.removeChild(elementPassed); if (heightNode > thisHeight) { thisHeight = heightNode; } // // Bounding Rect: // Or this approach... var clientRects = elementPassed.getClientRects(); heightRects = clientRects.height; if (heightRects > thisHeight) { thisHeight = heightRects; } } // // Default height not appropriate here // if (thisHeight == 0) { thisHeight = elementHeightDefault; } if (thisHeight > 3000) { // ERROR thisHeight = 3000; } return thisHeight; } 

que basicamente tenta tudo e qualquer coisa apenas para obter um resultado zero. ClientHeight sem efeito. Com os elementos problemáticos, normalmente recebo NaN na Base e zero nas alturas Deslocamento e Rolagem. Então tentei a solução Add DOM e o clientRects para ver se funciona aqui.

29 de junho de 2011, atualizei o código para tentar adicionar o DOM e o clientHeight com melhores resultados do que eu esperava.

1) clientHeight também foi 0.

2) Dom realmente me deu uma altura que foi ótima.

3) ClientRects retorna um resultado quase idêntico à técnica DOM.

Como os elementos adicionados são de natureza fluida, quando são adicionados a um elemento DOM de outra forma vazia, eles são renderizados de acordo com a largura desse contêiner. Isso fica estranho, porque isso é 30px mais curto do que eventualmente acaba.

Eu adicionei alguns instantâneos para ilustrar como a altura é calculada de forma diferente. Bloco de menu renderizado normalmenteBloco de menu adicionado ao elemento DOM Temp

As diferenças de altura são óbvias. Eu certamente poderia adicionar posicionamento absoluto e escondido, mas tenho certeza que não terá efeito. Continuei convencido de que isso não funcionaria!

(Eu discordo mais) A altura sai (renderiza) mais baixa que a altura real renderizada. Isso poderia ser resolvido definindo a largura do elemento DOM Temp para corresponder ao pai existente e poderia ser feito com bastante precisão na teoria. Eu também não sei o que resultaria de removê-los e adicioná-los de volta ao local existente. Ao chegarem através de uma técnica innerHTML, estarei procurando usar essa abordagem diferente.

* NO ENTANTO * Nada disso era necessário. Na verdade, funcionou como anunciado e retornou a altura correta !!!

Quando consegui tornar os menus visíveis novamente, surpreendentemente, o DOM havia retornado a altura correta de acordo com o layout do fluido na parte superior da página (279 px). O código acima também usa getClientRects, que retorna 280px.

Isso é ilustrado no instantâneo a seguir (tirado do Chrome depois de funcionar).
insira a descrição da imagem aqui

Agora eu não tenho idéia do porque esse truque de protótipo funciona, mas parece que sim. Como alternativa, getClientRects também funciona.

Eu suspeito que a causa de todo esse problema com esses elementos em particular foi o uso de innerHTML em vez de appendChild, mas isso é pura especulação neste momento.

offsetHeight , geralmente.

Se você precisar calcular algo, mas não mostrá-lo, defina o elemento como visibility:hidden e position:absolute , adicione-o à tree DOM, obtenha o offsetHeight e remova-o. (Isso é o que a biblioteca de protótipos faz nos bastidores da última vez que verifiquei).

Podemos obter a geometry do elemento …

 var geometry; geometry={}; var element=document.getElementById(#ibims); var rect = element.getBoundingClientRect(); this.geometry.top=rect.top; this.geometry.right=rect.right; this.geometry.bottom=rect.bottom; this.geometry.left=rect.left; this.geometry.height=this.geometry.bottom-this.geometry.top; this.geometry.width=this.geometry.right-this.geometry.left; console.log(this.geometry); 

Como sobre este JS simples?

Às vezes, o offsetHeight retornará zero porque o elemento que você criou ainda não foi renderizado no Dom. Eu escrevi essa function para tais circunstâncias:

 function getHeight(element) { var e = element.cloneNode(true); e.style.visibility = "hidden"; document.body.appendChild(e); var height = e.offsetHeight + 0; document.body.removeChild(e); e.style.visibility = "visible"; return height; } 

Se você já estiver usando o jQuery, sua melhor aposta será .outerHeight() ou .height() , conforme já foi dito.

Sem o jQuery, você pode verificar o tamanho da checkbox em uso e adicionar vários preenchimentos + bordas + altura do cliente ou usar getComputedStyle :

var h = getComputedStyle (document.getElementById (‘someDiv’)). height;

h será agora uma string como “53.825px”.

E não consigo encontrar a referência, mas acho que getComputedStyle() pode ser caro, então provavelmente não é algo que você queira chamar em cada evento window.onscroll (mas também não é a height() jQuery).

Com o MooTools:

$ (‘someDiv’). getSize (). y

 document.querySelector('.project_list_div').offsetWidth; 

Você definiu a altura no CSS especificamente? Se você não tem, você precisa usar o offsetHeight; em vez de height

 var h = document.getElementById('someDiv').style.offsetHeight;