jQuery获得一个元素的渲染高度?

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

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

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

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

651069 次浏览
小开

试一试:

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

clientHeight包含高度和垂直填充。

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

scrollHeight包含所包含文档的高度(在滚动的情况下将大于高度)、垂直填充和垂直边框。

小开
最佳答案

它应该只是

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

与jQuery。这将以数字的形式检索换行集中第一项的高度。

尝试使用

.style.height

只有在您首先设置了该属性时才有效。不是很有用!

小开

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

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

offsetHeight,通常。

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

小开

MooTools:

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

小开

一定使用

$('#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方法列表，我建议你看一看。

小开

这就是答案吗?

如果你需要计算一些东西，但不显示它，将元素设置为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，结果比我预期的要好。< / p >

1) clientHeight也是0。

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

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

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

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

.

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

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

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

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

这是在下面的快照中说明的(从Chrome一次工作。 enter image description here

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

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

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

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

然后设置主体来加载它

<body onload='anyName()'>
小开

你可以使用.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的网站或详细贴在这里。

它将清除.height() / innerHeight() / outerHeight()之间的区别

小开

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

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

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

h现在将是一个类似于" 53825 px"的字符串。

我找不到引用，但我想我听说getComputedStyle()可能很昂贵，所以它可能不是你想在每个window.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;
}
小开

< em >非JQUERY < / em > 因为在这些答案的顶部有一堆使用elem.style.height的链接……

< br > < p >内部高度: https://developer.mozilla.org/en-US/docs/Web/API/Element.clientHeight < / p > 
document.getElementById(id_attribute_value).clientHeight;
< br > < p >外高度: https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement.offsetHeight < / p > 
document.getElementById(id_attribute_value).offsetHeight;

或者是我最喜欢的引用之一:http://youmightnotneedjquery.com/

小开 
style = window.getComputedStyle(your_element);

然后简单地:style.height

小开

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

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

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

我使用这个函数来获取元素(返回浮动)的高度:

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

当你使用虚拟DOM。我在Vue中这样使用它:

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

对于Vue组件:

this.$refs['some-ref'].$el.getBoundingClientRect().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');
}
}
小开

我认为在2020年做到这一点的最好方法是使用香草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);
<div>What else am I? 🥴</div>


提交答案