Javascript 获取剪切的 DIV 的全高
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4612992/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Get full height of a clipped DIV
提问by Prakash Raman
How do I get the height of the div which includes the clipped area of the div ?
如何获得包含 div 裁剪区域的 div 高度？
<div style="height: 20px; overflow: hidden">
content<br>content<br>content<br>
content<br>content<br>content<br>
content<br>content<br>content<br>
</div>
回答by jolt
Well, you cannot do it that way, but it's possible when adding a inner element to your container, like this:
好吧，您不能那样做，但是在向容器中添加内部元素时是可能的，如下所示：
<div id="element" style="height: 20px; overflow: hidden;">
<p id="innerElement"> <!-- notice this inner element -->
content<br />content<br />content<br />
content<br />content<br />content<br />
content<br />content<br />content<br />
</p>
</div>
sidenote:wrapping content inside paragraphs is a good practice too, plus that one extra element isn't giving that much of problems, if any at all...
旁注：将内容包装在段落中也是一种很好的做法，另外一个额外的元素不会带来那么多问题，如果有的话......
And JavaScript:
和 JavaScript：
var innerHeight = document.getElementById('innerElement').offsetHeight;
alert(innerHeight);
P.S. For this JavaScript to work, put it after your #elementdiv, because plain JavaScript is executed before DOM is ready if it's not instructed to do so. To make this work when DOM is ready, check this.
PS 为了让这个 JavaScript 工作，把它放在你的#elementdiv 之后，因为如果没有指示，纯 JavaScript 会在 DOM 准备好之前执行。要在 DOM 准备好时使其工作，请检查此.
But I'd suggest getting jQuery, it will come in handy later on if you're going to extend JavaScript operations in your site.
但我建议使用jQuery，如果您打算在您的站点中扩展 JavaScript 操作，它将在以后派上用场。
Plus, jQuery is the power, for real!
另外，jQuery 是真正的力量！
That way, simply add this script to your <head />(assuming you've jQuery included):
这样，只需将此脚本添加到您的<head />（假设您已包含 jQuery）：
$(document).ready(function() {
var innerHeight = $('#innerElement').height();
alert(innerHeight);
});
回答by Colt
This works in all cases, whether you have a text node inside or a container. This is using jquery, but you don't need to.
这适用于所有情况，无论您有文本节点还是容器。这是使用jquery，但您不需要。
//return the total height.
totalHeight = $('#elem')[0].scrollHeight;
//return the clipped height.
visibleHeight = $('#elem').height();
$('#elem')[0] is returning the dom element from the jquery call. so you can use that on any dom elem using plain ol' javascript.
$('#elem')[0] 正在从 jquery 调用中返回 dom 元素。所以你可以使用普通的 ol' javascript 在任何 dom elem 上使用它。
回答by Shadow Wizard is Ear For You
Here is one way to achieve what you need, using Fabian idea:
这是使用 Fabian 想法实现您所需要的一种方法：
function GetHeight() {
var oDiv = document.getElementById("MyDiv");
var sOriginalOverflow = oDiv.style.overflow;
var sOriginalHeight = oDiv.style.height;
oDiv.style.overflow = "";
oDiv.style.height = "";
var height = oDiv.offsetHeight;
oDiv.style.height = sOriginalHeight;
oDiv.style.overflow = sOriginalOverflow;
alert("Real height is " + height);
}
Live demo and test case: http://jsfiddle.net/yahavbr/7Lbz9/
现场演示和测试用例：http: //jsfiddle.net/yahavbr/7Lbz9/
回答by Fabian
Thats not possible afaik. What you could try is to remove that style and set it using javascript after you got the height. Not the most elegant solution, but i think its the only one.
那是不可能的。您可以尝试删除该样式并在获得高度后使用 javascript 设置它。不是最优雅的解决方案，但我认为它是唯一的解决方案。
