获取剪裁的DIV的完整高度 [英] Get full height of a clipped DIV
问题描述
< div style =p>如何获得包含div剪辑区域的div高度？ height：20px; overflow：hidden>
内容< br>内容< br>内容< br>
内容< br>内容< br>内容< br>
内容< br>内容< br>内容< br>
< / div>
好的，你不能这样做，但它是添加一个内部元素到你的容器可能是这样的：
< div id =elementstyle =height： 20px; overflow：hidden;>
< p id =innerElement> <！ - 注意这个内部元素 - >
content< br />内容< br />内容< br />
content< br />内容< br />内容< br />
content< br />内容< br />内容< br />
< / p>
< / div>
sidenote：在段落内包装内容也是一个很好的做法，一个额外的元素没有给出那么多的问题，如果有的话...... ...
和JavaScript：
var innerHeight = document.getElementById（'innerElement'）。offsetHeight;
alert（innerHeight）;
为了使这个JavaScript工作，把它放在你的 #element div之后，因为在DOM准备好之前，如果没有指示，那么纯JavaScript就会被执行。为了在DOM准备就绪时进行这项工作，请检查。
但是，我建议您获取 jQuery ，如果您将继续在您的站点中扩展JavaScript操作。
另外，jQuery是 power ，对于真实的！
这样，只需将此脚本添加到< head /> （假设您已包含jQuery）：
<$ p $ （）;
alert（innerHeight）; $ b $（$）$（$）$（$） b}）;
How do I get the height of the div which includes the clipped area of the 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>
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:
var innerHeight = document.getElementById('innerElement').offsetHeight;
alert(innerHeight);
P.S. For this JavaScript to work, put it after your #element div, 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.
But I'd suggest getting jQuery, it will come in handy later on if you're going to extend JavaScript operations in your site.
Plus, jQuery is the power, for real!
That way, simply add this script to your <head /> (assuming you've jQuery included):
$(document).ready(function() {
var innerHeight = $('#innerElement').height();
alert(innerHeight);
});
Example @jsFiddle using jQuery way!
这篇关于获取剪裁的DIV的完整高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
