如何获得元素的渲染高度？
Answers:
应该是
$('#someDiv').height();jQuery。这将以数字形式检索包装集中的第一个项目的高度。
尝试使用
.style.height仅当您首先将属性设置为有效。不是很有用！
尝试以下方法之一：
var h = document.getElementById('someDiv').clientHeight;
var h = document.getElementById('someDiv').offsetHeight;
var h = document.getElementById('someDiv').scrollHeight;clientHeight 包括高度和垂直填充。
offsetHeight 包括高度，垂直填充和垂直边框。
scrollHeight 包括所含文档的高度（滚动时将大于高度），垂直填充和垂直边框。
.clientWidth/.clientHeight 滚动，则不包括滚动宽度。如果您想包括滚动宽度，可以element.getBoundingClientRect().width 改用
NON JQUERY， 因为elem.style.height在这些答案的顶部使用了一堆链接...
内部高度：https :
//developer.mozilla.org/zh-CN/docs/Web/API/Element.clientHeight
document.getElementById(id_attribute_value).clientHeight;外部高度：https :
//developer.mozilla.org/zh-CN/docs/Web/API/HTMLElement.offsetHeight
document.getElementById(id_attribute_value).offsetHeight; 或我最喜欢的参考文献之一：http: //youmightnotneedjquery.com/
您可以.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()
绝对使用
$('#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兼容性问题。换句话说，STUFF我不在乎-或想要。
但我不必。谢谢jQuery！
这个故事的寓意是：如果jQuery有某种方法，可能是出于充分的原因，可能与兼容性有关。
如果您最近没有阅读jQuery方法列表，建议您看一下。
document.querySelector('.project_list_div').offsetHeight;elem.getBoundingClientRect().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怎么样？
var geometry; geometry={};可以简单地是var geometry={};
我认为在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>这是答案吗？
“如果您需要计算但不显示某些内容，请将元素设置为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没有影响。使用问题元素时，我通常在底部获得NaN，在“偏移”和“滚动”高度中获得零。然后，我尝试了Add DOM解决方案和clientRects来查看它是否在这里工作。
2011年6月29日，我确实确实更新了代码，尝试同时添加到DOM和clientHeight中，结果均超出预期。
1）clientHeight也为0。
2）Dom实际上给了我一个很高的高度。
3）ClientRects返回的结果几乎与DOM技术相同。
因为添加的元素本质上是流动的，所以当将它们添加到否则为空的DOM Temp元素时，将根据该容器的宽度进行渲染。这变得很奇怪，因为比最终结束的时间短30px。
我添加了一些快照来说明如何以不同的方式计算高度。
高度差异很明显。我当然可以添加绝对的定位和隐藏的内容，但是我相信这不会起作用。我仍然坚信这行不通！
（我进一步说明）高度（渲染）低于真实渲染的高度。这可以通过将DOM Temp元素的宽度设置为与现有父级匹配来解决，并且在理论上可以相当准确地完成。我也不知道删除它们并将它们重新添加到现有位置会导致什么。当他们通过innerHTML技术到达时，我将使用这种不同的方法。
*但是*不必要。实际上，它按照广告宣传工作并返回了正确的高度！！！
当我能够再次看到菜单时，DOM惊人地返回了页面顶部每个流体布局的正确高度（279px）。上面的代码还使用了返回280px的getClientRects。
以下快照对此进行了说明（工作时从Chrome拍摄）。
现在，我不知道为什么该原型技巧有效，但是似乎可以。另外，getClientRects也可以。
我怀疑这些特定元素造成的所有麻烦的原因是使用innerHTML而不是appendChild，但这只是纯粹的推测。
offsetHeight，通常。
如果您需要计算但不显示某些内容，请将元素设置为visibility:hidden和position:absolute，将其添加到DOM树中，获取offsetHeight并删除它。（这就是我上次检查时原型库在后台执行的操作）。
有时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;
}如前所述，如果您已经在使用jQuery，则最好的选择是.outerHeight()或.height()。
如果没有jQuery，则可以检查使用中的框大小并添加各种填充+边框+ clientHeight，或者可以使用getComputedStyle：
var h = getComputedStyle（document.getElementById（'someDiv'））。height;
h 现在将是一个类似于“ 53.825px”的字符串。
而且我找不到引用，但是我想我听说getComputedStyle()它可能会很昂贵，所以您可能不想在每个window.onscroll事件上都调用它（但是，jQuery都不是height()）。
getComputedStyle，可使用parseInt(h, 10)获取整数进行计算。
如果我正确理解了您的问题，那么可能会有所帮助：
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');
}
}您是否已在CSS中专门设置高度？如果没有，则需要使用offsetHeight;而不是height
var h = document.getElementById('someDiv').style.offsetHeight;