Question

我目前正在尝试修改“滑入”＆lt; div＆gt;的Javascript函数。该脚本要求您定义div的高度，因此在动态填充的＆lt; div＆gt;中它几乎无用。我在javascript中的clientHeight属性上找到了一些文本，但看起来它不支持显示设置为无的＆lt; div＆gt;（这是用于滑动div的方法）。这是有道理的，因为客户端窗口中该div的高度不算什么。

基本上我想知道你们都知道的其他方法，或者当display：none时有办法解决clientHeight = 0。

谢谢！

哦，这是我正在使用的功能：

function getDivHeight(objName) {
    return boxHeight = document.getElementById(objName).clientHeight;
}

Answer 1

一个简单的解决方案是将其可见性设置为“隐藏”，并将其显示为“阻止”并进行测量。但是，一些现代浏览器将设法在这么短的时间内更新页面布局，你会得到一个令人讨厌的闪烁。克服这个问题的最简单方法是将元素放在一个绝对定位的容器中，溢出设置为“隐藏”。

Answer 2

我很幸运克隆了元素，将其移出屏幕，然后显示它以获得客户端高度：

var original = document.getElementById(some_id);
var new_item = original.cloneNode(true);
document.body.appendChild(new_item);  // item already hidden, so it won't show yet.
                                      // you may wish to validate it is hidden first
new_item.style.position = "absolute";
new_item.style.left = "-1000px";
new_item.style.display = "block";
var height = new_item.clientHeight;

编辑：通过浏览jQuery代码，他们完全按照Tsvetomir Tsonev的建议行事。 jQuery暂时将样式设置为“display：block; position：absolute; visibility：none”，然后测量高度，在测量后将属性重新交换。

所以，看起来你不得不做一些hackish，无论是克隆节点还是冒着让它在某些浏览器中闪烁的风险......我更喜欢Tsvetomir的建议，比起我最初的黑客，至少，不涉及将节点克隆到您不需要的DOM中。无论哪种方式，元素都不能设置为“display：none”以测量它的高度。 DOM不精彩吗？： - ）

编辑2：另外值得注意的是，在jQuery收集高度后，它会增加填充，边距和边框大小的容差，因此您可能也需要这样做。

Answer 3

是的，页面上未显示的元素没有尺寸。

这有点道理。考虑一个已创建并填充了大量文本但尚未添加到文档树的元素。有多高？取决于字体大小。字体大小有多大？取决于插入div的文档中的位置;它的父字体大小将继承。

对于具有“display：none”的元素也是如此。它没有渲染，所以没有尺寸。难道我们不能问“如果'显示：阻止'会有多高？”结果没有，因为如果显示，那本身就可以改变其父块的尺寸，然后显示的元素的尺寸将与非显示元素的尺寸不一致！

典型的解决方案是取消设置“display：none”，测量元素的高度，然后立即重新设置“display：none”。浏览器不会在JavaScript中间重绘，因此您不会在页面上看到闪烁。

Answer 4

我知道你们很久以前就已经解决了这个问题，但我认为我应该分享一下，因为获得隐藏div标签的高度非常棘手。继续阅读你的帖子后我做了什么我把div放在我想要滑入1px高度div的内部，溢出设置为隐藏。你甚至不需要将内部div的显示设置为none，因为它已经存在并且如果你使用offsetHeight它应该为所有浏览器返回适当的高度，你可以使用该高度向下滑动你的div。

和平!!!

Answer 5

在IE中，您可以尝试scrollHeight，但我不确定它是否可行或是否是跨浏览器。

Javascript clientHeight和替代品

5 个答案: