如何获得包含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>
jol*_*olt 49
好吧,你不能这样做,但是在向容器添加内部元素时可以这样做,如下所示:
<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>
旁注:在段落中包装内容也是一个很好的做法,加上一个额外的元素没有给出那么多问题,如果有的话......
和JavaScript:
var innerHeight = document.getElementById('innerElement').offsetHeight;
alert(innerHeight);
PS为了使这个JavaScript工作,把它放在你的#elementdiv之后,因为如果没有指示这样做,那么在DOM准备好之前执行普通的JavaScript.要在DOM准备就绪时使其工作,请检查此项.
但我建议使用jQuery,如果你要在你的网站中扩展JavaScript操作,它会在以后派上用场.
另外,jQuery是真正的力量!
这样,只需将此脚本添加到您的<head />(假设您包含jQuery):
$(document).ready(function() {
var innerHeight = $('#innerElement').height();
alert(innerHeight);
});
小智 39
这适用于所有情况,无论您是内部还是文本节点还是容器.这是使用jquery,但你不需要.
//return the total height.
totalHeight = $('#elem')[0].scrollHeight;
//return the clipped height.
visibleHeight = $('#elem').height();
$('#elem')[0]从jquery调用返回dom元素.所以你可以使用普通的'javascript在任何dom elem上使用它.
以下是使用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);
}
现场演示和测试用例:http://jsfiddle.net/yahavbr/7Lbz9/