Question

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

假设您有一个<div>元素，其中包含一些内容。内部的这个内容将延伸<div>的高度。如果没有明确设置高度，如何获得“渲染”高度。显然，我试过了：

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

这样做有诀窍吗？如果有帮助，我正在使用jQuery。

Answer 1

尝试以下方法之一：

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

clientHeight包括高度和垂直填充。

offsetHeight包括高度，垂直填充和垂直边框。

scrollHeight包含所包含文档的高度（在滚动时大于高度），垂直填充和垂直边框。

Answer 2

应该只是

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

使用jQuery。这将检索包装集中第一个项目的高度作为数字。

尝试使用

.style.height

仅在您首先设置属性时才有效。不太有用！

Answer 3

NON JQUERY ，因为在这些答案的顶部有一堆使用elem.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/

Answer 4

您可以将.outerHeight()用于此目的。

它将为您提供元素的完整渲染高度。此外，您不需要设置元素的任何css-height。为了预防，您可以保持其高度自动，以便根据内容的高度进行渲染。

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

要清楚了解这些功能，您可以访问jQuery的网站或detailed post here。

它将清除.height() / innerHeight() / outerHeight()

之间的差异

Answer 5

style = window.getComputedStyle(your_element);

然后简单地说：style.height

Answer 6

我用这个：

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

当您使用虚拟DOM 时，它也可以使用。我在Vue中这样使用它：

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

Answer 7

绝对使用

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

或

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

我将这个作为一个额外的答案发布，因为我刚学到了几件重要的事情。

我刚刚使用offsetHeight陷入陷阱。这就是发生的事情：

我使用了一个很好的老技巧，即使用调试器来“监视”我的元素具有哪些属性
我看到哪一个值的值与我期待的值相近
它是offsetHeight - 所以我用了它。
然后我意识到它与隐藏的DIV无法合作
我在计算maxHeight之后试图隐藏但看起来很笨 - 弄得一团糟。
我做了一个搜索 - 发现了jQuery.height（） - 并用它
发现height（）甚至可以隐藏元素
只是为了好玩我检查了高度/宽度的jQuery实现

这只是其中的一部分：

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

是的，它看着两个滚动和偏移。如果失败，它会更进一步，考虑到浏览器和CSS兼容性问题。换句话说，我不打算关心 - 或者想要。

但我没有。谢谢jQuery！

故事的道德：如果jQuery有一个方法可能有充分理由，可能与兼容性有关。

如果您最近没有通读jQuery list of methods，我建议您先看一下。

Answer 8

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

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

然后设置正文以加载它

<body onload='anyName()'>

Answer 9

这就是答案吗？

“如果您需要计算某些内容但未显示它，请将元素设置为visibility:hidden和position:absolute，将其添加到DOM树中，获取offsetHeight，然后将其删除。（这就是上次我检查时，原型库在后面做了。“

我在许多元素上遇到同样的问题。网站上没有jQuery或Prototype，但我赞成借用这项技术。作为一些无效的例子，接下来是做了什么，我有以下代码：

// 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没有任何影响。对于问题元素，我通常在Base中获得NaN，在Offset和Scroll高度中获得零。然后我尝试了添加DOM解决方案和clientRects以查看它是否在这里工作。

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

1）clientHeight也是0。

2）Dom实际上给了我一个很棒的高度。

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

因为添加的元素本质上是流体，当它们被添加到其他空的DOM Temp元素时，它们将根据该容器的宽度进行渲染。这很奇怪，因为它比最终结束的时间缩短了30便士。

我添加了一些快照来说明高度的计算方式不同。 Menu block rendered normally Menu block added to DOM Temp element

高度差异很明显。我当然可以添加绝对定位和隐藏，但我相信这将无效。我继续相信这不起作用！

（我进一步说道）高度出现（渲染）低于真实的渲染高度。这可以通过设置DOM Temp元素的宽度以匹配现有父元素来解决，并且理论上可以相当准确地完成。我也不知道删除它们并将它们添加回现有位置会导致什么结果。当他们通过innerHTML技术到达时，我将使用这种不同的方法。

* HOWEVER * 这些都不是必需的。事实上，它像广告一样工作，并返回正确的高度!!!

当我能够再次看到菜单时，令人惊讶的是DOM已根据页面顶部的流体布局返回了正确的高度（279px）。上面的代码也使用了返回280px的getClientRects。

以下快照（一旦工作时从Chrome中获取）中说明了这一点 enter image description here

现在我不知道为什么这个原型技巧有效，但似乎。或者，getClientRects也可以。

我怀疑这些特定元素的所有麻烦的原因是使用innerHTML而不是appendChild，但这是纯粹的推测。

Answer 10

我们可以得到Element几何...

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怎么样？

Answer 11

offsetHeight，通常。

如果您需要计算某些内容但未显示，请将元素设置为visibility:hidden和position:absolute，将其添加到DOM树中，获取offsetHeight，然后将其删除。（这就是我上次检查时原型库在幕后所做的事情。）

Answer 12

有时，offsetHeight将返回零，因为您创建的元素尚未在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;
}

Answer 13

如果您已经使用jQuery，最好的选择是.outerHeight()或.height()，如上所述。

如果没有jQuery，您可以检查正在使用的框大小，并添加各种填充+边框+ clientHeight，或，您可以使用getComputedStyle：

var h = getComputedStyle（document.getElementById（'someDiv'））。height;

h现在将是一个像“53.825px”的字符串。

我找不到引用，但我认为我听说getComputedStyle()可能很昂贵，所以它可能不是你想要在每个window.onscroll事件上调用的东西（但是，jQuery也不是height()）。

Answer 14

使用MooTools：

$（ 'someDiv'）。的getSize（）。Ý

Answer 15

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

Answer 16

如果我正确理解了您的问题，那么可能会有所帮助：

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

Answer 17

您是否具体设置了css的高度？如果您还没有，则需要使用offsetHeight;而不是height

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

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

17 个答案: