你如何获得元素的渲染高度？
你如何获得元素的渲染高度？
假设你有一个内部有一些内容的<div>元素。 里面的这个内容将会扩展<div>的高度。 当你没有明确设置高度时，如何获得“已渲染”高度？ 显然，我试过了：
var h = document.getElementById('someDiv').style.height;
有这样做的伎俩吗？ 如果有帮助，我正在使用jQuery。
它应该是
$('#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包含所包含的文档的高度（在滚动时大于高度），垂直填充和垂直边框。
非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/
你可以使用.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，可能会帮助一些人。 它获得“ID1”的总高度，并在“ID2”上使用它，
function anyName(){ var varname=document.getElementById('ID1').offsetHeight; document.getElementById('ID2').style.height=varname+'px'; }
然后设置正文加载它
<body onload='anyName()'>
绝对使用
$('#someDiv').height() // to read it
要么
$('#someDiv').height(newHeight) // to set it
我发布这个作为一个额外的答案，因为这是我刚刚学到的一些重要的事情。
我刚刚陷入了使用offsetHeight的陷阱。 这是发生了什么事：
- 我用了一个很好的使用调试器的技巧来“观察”我的元素有什么属性
- 我看到哪一个价值围绕着我期望的价值
- 它被抵消了 – 所以我用了。
- 然后我意识到它没有与隐藏的DIV工作
- 在计算maxHeight之后，我试图隐藏起来，但看起来很笨拙 – 陷入了一片混乱。
- 我做了一个搜索 – 发现jQuery.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添加比我预期更好的结果。
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并将其删除。 （这是原型库在上次我检查后在幕后做的）。
style = window.getComputedStyle(your_element);
那么只需： style.height
有时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() ， .height() 。
没有jQuery，你可以检查正在使用的框大小，并添加各种填充+边框+ clientHeight， 或者你可以使用getComputedStyle ：
var h = getComputedStyle（document.getElementById（'someDiv'））。height;
现在h将是一个像“53.825px”的字符串。
而我找不到引用，但我想我听说getComputedStyle()可能是昂贵的，所以它可能不是你想要调用每个window.onscroll事件（但是，既不是jQuery的height() ）。
有了MooTools：
$（ 'someDiv'）。的getSize（）。ÿ
你有没有特别设置CSS的高度？ 如果你不需要使用offsetHeight; 而不是height
var h = document.getElementById('someDiv').style.offsetHeight;
