如何获得元素的渲染高度?

假设你有一个<div>元素,里面有一些内容。里面的内容将扩展<div>的高度。当你没有显式地设置高度时,你如何获得“渲染”的高度。显然,我尝试过:

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

这样做有什么诀窍吗?如果有帮助的话,我正在使用jQuery。


当前回答

如果你已经在使用jQuery,你最好的选择是. outerheight()或.height(),如上所述。

没有jQuery,你可以检查使用的box-sizing和添加各种填充+边框+ clientHeight,或者你可以使用getComputedStyle:

罗马,档案。

H现在是一个字符串,比如" 538.25 px"。

我找不到引用,但我听说getComputedStyle()很昂贵,所以它可能不是你想在每个窗口调用的东西。onscroll事件(但是,也不是jQuery的height())。

其他回答

非JQUERY,因为有一堆链接使用element .style.height在这些答案的顶部…

内部高度: https://developer.mozilla.org/en-US/docs/Web/API/Element.clientHeight

document.getElementById(id_attribute_value).clientHeight;

外高度: https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement.offsetHeight

document.getElementById(id_attribute_value).offsetHeight; 

或者是我最喜欢的参考资料之一:http://youmightnotneedjquery.com/

offsetHeight,通常。

如果你需要计算一些东西,但不显示它,将元素设置为visibility:hidden和position:absolute,将它添加到DOM树,获取offsetHeight,然后删除它。(这就是上次我检查的原型库在幕后所做的工作)。

如果你已经在使用jQuery,你最好的选择是. outerheight()或.height(),如上所述。

没有jQuery,你可以检查使用的box-sizing和添加各种填充+边框+ clientHeight,或者你可以使用getComputedStyle:

罗马,档案。

H现在是一个字符串,比如" 538.25 px"。

我找不到引用,但我听说getComputedStyle()很昂贵,所以它可能不是你想在每个窗口调用的东西。onscroll事件(但是,也不是jQuery的height())。

有时offsetHeight会返回0,因为您创建的元素还没有在Dom中呈现。在这种情况下,我写了这个函数:

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;
}

如果我正确理解了你的问题,那么也许这样做会有所帮助:

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');
    } 
}