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 <div>elemento com algum conteúdo interno. Este conteúdo interno vai esticar a altura do <div>. Como você obtém a altura "renderizada" quando você não definiu explicitamente a altura. Obviamente, eu tentei:

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

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

Deveria ser apenas

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

com jQuery. Isso recupera a altura do primeiro item no conjunto agrupado 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 altura, preenchimento vertical e bordas verticais.

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

NÃO PERGUNTA, pois havia vários links usando elem.style.heightna parte superior dessas respostas ...

ALTURA INTERNA:
https://developer.mozilla.org/en-US/docs/Web/API/Element.clientHeight

document.getElementById(id_attribute_value).clientHeight;

ALTURA EXTERIOR:
https://developer.mozilla.org/en-US/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 esse fim.

Ele fornecerá a altura renderizada completa do elemento. Além disso, você não precisa definir nenhum css-heightelemento. Por precaução, você pode manter sua altura automaticamente para que possa ser renderizada conforme 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 uma publicação detalhada aqui .

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

Eu uso isso para obter a altura de um elemento (retorna float) :

document.getElementById('someDiv').getBoundingClientRect().height

Também funciona quando você usa o DOM virtual . Eu uso no Vue assim:

this.$refs['some-ref'].getBoundingClientRect().height

style = window.getComputedStyle(your_element);

então simplesmente: style.height

Definitivamente usar

$('#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 offsetHeight. Isso é o que aconteceu :

• Usei o bom e velho truque de usar um depurador para 'observar' quais propriedades meu elemento possui
• Eu vi qual deles tem um valor em torno do valor que eu esperava
• Foi offsetHeight - então eu usei isso.
• Então eu percebi que não funcionava com um DIV oculto
• Tentei me esconder depois de calcular o maxHeight, mas isso parecia desajeitado - ficou uma bagunça.
• Eu fiz uma pesquisa - descobri o jQuery.height () - e usei
• descobri que height () funciona mesmo em elementos ocultos
• só por diversão, verifiquei a implementação do 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, ele olha para ambos rolagem e deslocamento. Se isso falhar, parece ainda mais, levando em consideração os problemas de compatibilidade do navegador e do css. Em outras palavras, MATERIAL NÃO ME IMPORTO - ou quero.

Mas eu não preciso. Obrigado jQuery!

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

Se você não leu a lista de métodos do jQuery recentemente, sugiro que você dê uma olhada.

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

Eu criei um código simples que nem precisa do JQuery e provavelmente vai ajudar algumas pessoas. Ele obtém a altura total de 'ID1' depois de carregado e usa-o em '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

<body onload='anyName()'>

Hm, podemos obter a geometria 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);

E esse JS simples?

Eu acho que a melhor maneira de fazer isso em 2020 é usar js simples e getBoundingClientRect().height;

Aqui está um exemplo

let div = document.querySelector('div');
let divHeight = div.getBoundingClientRect().height;

console.log(`Div Height: ${divHeight}`);

<div>
  How high am I? 🥴
</div>

Além heightdisso, também temos acesso a várias outras coisas sobre o div.

let div = document.querySelector('div');
let divInfo = div.getBoundingClientRect();

console.log(divInfo);

<div>What else am I? 🥴</div>

Então esta é a resposta?

"Se você precisar calcular algo, mas não mostrar, defina o elemento como visibility:hiddene position:absoluteadicione-o à árvore DOM, obtenha o offsetHeight e remova-o. (É o que a biblioteca de protótipos faz atrás das linhas da última vez que verifiquei)."

Eu tenho o mesmo problema em vários elementos. Não há jQuery ou Prototype para ser usado no site, mas sou a favor de pedir emprestada a técnica, se funcionar. Como exemplo de algumas coisas que não funcionaram, seguidas pelo que aconteceu, 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 de tudo para obter um resultado zero. ClientHeight sem efeito. Com os elementos problemáticos, normalmente recebo NaN na Base e zero nas alturas Offset e Scroll. Tentei a solução Add DOM e o clientRects para ver se funciona aqui.

Em 29 de junho de 2011, atualizei o código para tentar adicionar ao DOM e ao 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 fluidos por natureza, quando são adicionados a um elemento DOM Temp vazio, eles são renderizados de acordo com a largura desse contêiner. Isso fica estranho, porque é 30px mais curto do que acaba.

Adicionei alguns instantâneos para ilustrar como a altura é calculada de maneira diferente.

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

(Discordo mais) A altura sai (é renderizada) menor que a verdadeira altura renderizada. Isso poderia ser resolvido configurando a largura do elemento DOM Temp para corresponder ao pai existente e poderia ser feito com bastante precisão na teoria. Também não sei o que resultaria de removê-los e adicioná-los novamente ao local existente. Como eles chegaram através de uma técnica innerHTML, estarei procurando usar essa abordagem diferente.

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

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

Isso é ilustrado no instantâneo a seguir (tirado do Chrome depois de funcionar).

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

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

offsetHeight, usualmente.

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

Às vezes, offsetHeight retornará zero porque o elemento que você criou ainda não foi renderizado no Dom. Eu escrevi esta função 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á usa o jQuery, sua melhor aposta é .outerHeight()ou .height(), como já foi afirmado.

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

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

h agora será uma sequência como "53.825px".

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

Com o MooTools :

$('someDiv').getSize().y

Se entendi sua pergunta corretamente, talvez algo assim ajude:

function testDistance(node1, node2) {
    /* get top position of node 1 */
    let n1Pos = node1.offsetTop;
    /* get height of node 1 */
    let n1Height = node1.clientHeight;
    /* get top position of node 2 */
    let n2Pos = node2.offsetTop;
    /* get height of node 2 */
    let n2Height = node2.clientHeight;

    /* add height of both nodes */
    let heightTogether = n1Height + n2Height;
    /* calculate distance from top of node 1 to bottom of node 2 */
    let actualDistance = (n2Pos + n2Height) - n1Pos;

    /* if the distance between top of node 1 and bottom of node 2
       is bigger than their heights combined, than there is something between them */
    if (actualDistance > heightTogether) {
        /* do something here if they are not together */
        console.log('they are not together');
    } else {
        /* do something here if they are together */
        console.log('together');
    } 
}

Você definiu a altura no css especificamente? Se você não tiver, precisa usar em offsetHeight;vez deheight

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