jQuery获取元素的渲染高度？答案

【问题标题】：jQuery get the rendered height of an element?jQuery获取元素的渲染高度？
【发布时间】：2010-10-06 07:06:18
【问题描述】：

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

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

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

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

【问题讨论】：

看到这个答案stackoverflow.com/questions/19581307/…

标签： jquery css height

【解决方案1】：

尝试以下之一：

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

clientHeight 包括高度和垂直填充。

offsetHeight 包括高度、垂直内边距和垂直边框。

scrollHeight 包括包含文档的高度（在滚动的情况下会大于高度）、垂直填充和垂直边框。

【讨论】：

谢谢，我不知道这个属性。它也兼容 IE8+。
我对clientHeight的含义感到困惑。我有一个 div 元素，其中包含一堆 p 元素，并且内容远远超出了浏览器的可视区域。我希望 clientHeight 给出渲染的高度，而 scrollHeight 给出完整的长度。但它们几乎相等（仅在边距、填充等方面有所不同）。
@bahti 除非它本身具有有限的高度和溢出：隐藏或某种形式的溢出：滚动，否则元素将扩展（无论是否在您的视图中）以显示所有内容和 scrollHeight 和clientHeight 将相等。
很好的答案，但从逻辑上讲，影响元素高度的边框是水平的顶部和底部边框。这个答案将它们称为“垂直边界”。只是想我会放弃我的 2 美分
据我所知，.clientWidth/.clientHeight 不包括滚动宽度如果显示滚动。如果你想包含滚动宽度，可以使用element.getBoundingClientRect().width 代替

【解决方案2】：

应该是

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

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

尝试使用

.style.height

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

【讨论】：

即使你没有使用 jQuery 或者不能或者不想他们使用的代码。里面发生了很多疯狂的事情！
完全同意那个西蒙。研究 Javascript 库如何解决问题总是很有见地
@matejkramny - 这个问题和答案是5 年前。 OP 已经在他们的网站上使用了 jQuery，所以与其自己重新实现相同/相似的逻辑，为什么不使用已经完成的单行 jQuery 函数呢？我同意 jQuery 在很多事情上都是矫枉过正的，而且我不害怕 vanilla JS，但是当库中有一个函数可以完全满足您的需要时，不使用它似乎很愚蠢，特别是出于原因“不是在这里发明的”
@matejkramny OP 在询问问题时的意图是获取元素的渲染高度，而不是了解 DOM 和幕后发生的事情；如果这是他们的意图，他们就问错了问题。我同意人们应该倾向于理解他们使用的库和框架，知识就是力量等等，但有时人们只是想要一个特定问题的答案。事实上，上面的 cmets 已经建议查看 jQuery 代码以了解幕后发生的事情。
对于 OP，使用 jQuery 是一个有效的答案。对于从那时起看到这一点的世界其他地方，非 jQuery 答案是最好的答案。也许 SO 需要适应这一现实，也许投票最高的答案应该以某种方式突出显示，而不是接受的答案。

【解决方案3】：

你有没有专门在css中设置高度？如果还没有，则需要使用offsetHeight; 而不是height

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

【讨论】：

offsetHeight 是元素本身的属性，而不是它的样式。

【解决方案4】：

offsetHeight，通常。

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

【讨论】：

有趣。我从来没有检查过原型。知道为什么 jQuery 不在幕后这样做吗？
我在遇到困难并测试了该技术时发现它在纯 JavaScript 中运行良好

【解决方案5】：

使用 MooTools：

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

【讨论】：

【解决方案6】：

一定要用

$('#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，我建议你看看。

【讨论】：

在问题级别看到您的其他评论。我在 jQuery 上出售。已经有一段时间了。但这敲定了交易。我很喜欢这个简单的东西将为我解决 100 多个布局问题（主要是在我知道 JavaScript 正在运行的 Intranet 网站上）。

【解决方案7】：

这就是答案吗？

"如果需要计算但不显示，设置元素为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 高度中得到零。然后我尝试了 Add DOM 解决方案和 clientRects 看看它是否在这里工作。

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

1) clientHeight 也是 0。

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

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

因为添加的元素本质上是流动的，所以当它们被添加到原本为空的 DOM Temp 元素时，它们会根据该容器的宽度呈现。这很奇怪，因为它比最终的长度短了 30 像素。

我添加了一些快照来说明如何以不同方式计算高度。

高度差异很明显。我当然可以添加绝对定位和隐藏，但我相信这不会有任何效果。我仍然坚信这行不通！

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

* 但是 * 这些都不是必需的。事实上，它像宣传的那样工作并返回了正确的高度！！！

当我能够让菜单再次可见时，令人惊讶的是，DOM 已经根据页面顶部的流畅布局返回了正确的高度 (279px)。上面的代码还使用了返回 280px 的 getClientRects。

这在下面的快照中得到了说明（从 Chrome 中获取）

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

我怀疑这些特定元素的所有这些问题的原因是使用了 innerHTML 而不是 appendChild，但这纯粹是猜测。

【讨论】：

【解决方案8】：

我编写了一个甚至不需要 JQuery 的简单代码，并且可能会帮助一些人。加载后获取“ID1”的总高度并在“ID2”上使用

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

然后只需设置body来加载它

<body onload='anyName()'>

【讨论】：

【解决方案9】：

您可以为此使用.outerHeight()。

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

//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()之间的差异

【讨论】：

【解决方案10】：

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

不用jQuery，你可以在使用中检查box-sizing并添加各种paddings + borders + clientHeight，或者你可以使用getComputedStyle：

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

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

而且我找不到参考，但我想我听说 getComputedStyle() 可能很昂贵，因此您可能不想在每个 window.onscroll 事件上调用它（但是，jQuery 的 height() 也不是） .

【讨论】：

获得getComputedStyle 的高度后，使用parseInt(h, 10) 获取整数进行计算。

【解决方案11】：

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

【讨论】：

您需要克隆该元素，否则它将完全从 dom 中删除，从您的代码看来，这就是将会发生的事情。
此代码不打算将元素保留在 DOM 中。它旨在将其简单地放入 DOM（足够长以呈现它并获得其高度），然后将其取出。您可以稍后将元素放入 dom 其他地方（在您做之前知道它的高度）。注意函数名“getHeight”；这就是代码打算做的所有事情。
@punkbit：我明白你的意思。您的元素已经在 dom 中。我编写的代码是针对尚未在 DOM 中的元素。正如你所说，克隆会更好，因为元素是否在 dom 中并不重要。
@punkbit : 我修改了使用克隆的代码，但没有测试过。
是的，这就是我的观点。在我看来，他对 DOM 中的现有元素说“元素”。但一切都好！不要误会。

【解决方案12】：

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/

【讨论】：

【解决方案13】：

style = window.getComputedStyle(your_element);

然后简单地说：style.height

【讨论】：

【解决方案14】：

嗯，我们可以得到元素几何体......

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

【讨论】：

var geometry; geometry={}; 可以简单地是var geometry={};

【解决方案15】：

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

【讨论】：

此属性会将值四舍五入为整数。如果您需要 float 值，请使用 elem.getBoundingClientRect().height

【解决方案16】：

我用它来获取元素的高度（返回浮点数）：

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

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

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

对于 Vue 组件：

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

【讨论】：

getBoundingClientRect().height 返回一个浮点数（而其他返回整数），很好:)

【解决方案17】：

如果我正确理解了您的问题，那么也许这样的事情会有所帮助：

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

【讨论】：

【解决方案18】：

我认为 2020 年最好的方法是使用 vanilla js 和 getBoundingClientRect().height;

这是一个例子

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

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

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

除了通过这种方式获取height 之外，我们还可以访问有关div 的大量其他内容。

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

console.log(divInfo);

&lt;div&gt;What else am I? ?&lt;/div&gt;

【讨论】：