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

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

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

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


当前回答

你在css中设置高度了吗?如果你没有,你需要使用offsetHeight;而不是身高

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

其他回答

这就是答案吗?

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

我在一些元素上也有同样的问题。没有jQuery或原型在网站上使用,但我完全赞成借用技术,如果它是有效的。作为一些失败的事情的例子,接下来是什么,我有以下代码:

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

它尝试了所有的方法,结果都是零。没有影响的ClientHeight。有了问题元素,我通常在基数中得到NaN,在偏移和滚动高度中得到零。然后我尝试了添加DOM解决方案和clientRects,看看它是否在这里工作。

2011年6月29日, 我确实更新了代码,尝试添加到DOM和clientHeight,结果比我预期的要好。

1) clientHeight也是0。

2) Dom给了我一个非常棒的身高。

3) ClientRects返回的结果几乎与DOM技术相同。

因为添加的元素本质上是流动的,所以当它们被添加到一个空的DOM Temp元素中时,它们将根据该容器的宽度呈现。这有点奇怪,因为它比最终的长度短了30px。

我添加了一些快照来说明高度是如何计算的。

身高差异很明显。我当然可以添加绝对定位和隐藏,但我相信这不会有任何影响。我仍然相信这是行不通的!

(我进一步离题)高度出来(渲染)低于真实渲染高度。这可以通过设置DOM Temp元素的宽度来匹配现有的父元素来解决,理论上可以相当准确地做到这一点。我也不知道把它们移走,再把它们加回到现有的位置会产生什么结果。当它们通过innerHTML技术到达时,我将使用这种不同的方法。

然而,这些都是不必要的。事实上,它像广告宣传的那样工作,并返回正确的高度!!

当我能够让菜单再次可见时,令人惊讶的是,DOM在页面顶部的流体布局中返回了正确的高度(279px)。上面的代码也使用getClientRects返回280px。

下面的快照说明了这一点(在Chrome运行时拍摄)。

现在我不知道为什么这个原型戏法是有效的,但它似乎是。或者,getClientRects也可以。

我怀疑这些特定元素的所有这些问题的原因是使用了innerHTML而不是appendChild,但在这一点上,这纯粹是推测。

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

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

嗯,我们可以得到元素几何…

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

这个纯JS怎么样?

非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/

我做了一个简单的代码,甚至不需要JQuery,可能会帮助一些人。 它在加载后得到ID1的总高度并在ID2上使用它

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

然后设置主体来加载它

<body onload='anyName()'>