Javascript 获得修剪过的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>

内容
内容
内容

内容
内容
内容

内容
内容
内容

那是不可能的。您可以尝试删除该样式，并在获得高度后使用javascript进行设置。这不是最优雅的解决方案，但我认为这是唯一的解决方案。

好吧，你不能这样做，但在容器中添加一个内部元素时，这是可能的，如下所示：

<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正常工作，请将其放在

#元素

div之后，因为如果没有指示它这样做，则在DOM准备就绪之前执行纯JavaScript。要在DOM准备就绪时使其工作，请

但我建议，如果您打算在您的站点中扩展JavaScript操作，它将在以后派上用场

另外，jQuery是真正的力量

这样，只需将此脚本添加到您的

（假设您已经包含jQuery）：

---

这里有一种方法可以实现您的需求，使用费边思想：

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);
}

---

实时演示和测试用例：

这在所有情况下都有效，无论您的内部是文本节点还是容器。这是在使用jquery，但您不需要这样做

//return the total height.
totalHeight = $('#elem')[0].scrollHeight;
//return the clipped height.
visibleHeight = $('#elem').height();

$（'#elem'）[0]正在从jquery调用返回dom元素。因此，您可以在任何dom元素上使用纯ol'javascript。

原生javascript。早在MSIE 6：

<div id="cont" style="width:100px;height:100px;overflow:auto;border:#000 solid 1px;">
    <div style="height:1500px;">dddd</div>
</div>


<script>alert(document.getElementById('cont').scrollHeight)</script>

dddd
警报（document.getElementById（'cont'）.scrollHeight）

使用元素的

滚动高度

，而不是

clientHeight

或

offsetHeight

---

不过，包装内容的方法更好。

我对这个想法不屑一顾，我认为，如果能很好地包装成函数，它就足够优雅了。：）是的。看来这是最好的办法。谢谢哦，是的，我喜欢jQuery。可爱的库。提示：（这让我抓到了）如果你一直从高度或视线之外返回0，请确保在进行测量之前已将元素设置为可见。这是一种很好的方法。谢谢不需要添加内部元素，scrollHeight属性包含元素的高度，包括剪裁区域。是的，这样就可以了。虽然我希望在计算高度之前不需要移除溢出。实际上，这恰好完美地解决了我的问题，因为溢出设置/重置的速度并没有带来任何影响scroll@Prakash由于我只设置了一个变量，然后将原始溢出和高度设置回原来的值，所以在一个“勾号”内完成这样用户就不会在UI中看到任何变化。对于任何寻求更好方法的人，跳过接受的答案，尝试@Colt答案。除了这个答案使用jQuery，这个问题没有问任何关于jQuery的问题。我认为重点是使用

滚动高度

。。。不是jQueryThe技巧在这里的scrollHeight属性中，它包含剪切前元素的高度。该属性在没有jQuery的情况下可用。太棒了！非常感谢。

//return the total height.
totalHeight = $('#elem')[0].scrollHeight;
//return the clipped height.
visibleHeight = $('#elem').height();

<div id="cont" style="width:100px;height:100px;overflow:auto;border:#000 solid 1px;">
    <div style="height:1500px;">dddd</div>
</div>


<script>alert(document.getElementById('cont').scrollHeight)</script>