Javascript 客户端高度不一致答案

【问题标题】：Javascript clientHeight inconsistencyJavascript 客户端高度不一致
【发布时间】：2010-10-12 15:03:49
【问题描述】：

在编写 Javascript 时，我从 earlier 获得了帮助，该函数获取隐藏元素的高度，有人将我推荐给 Prototype 函数 getDimensions()。在示例中，他们设置了“可见性：隐藏；位置：绝对；显示：块；”，这可以有效地让我们测量 clientHeight 在显示时的值。然后他们把一切都放回去了，你就可以开始你的生意了。我没有使用原型，但我认为它工作正常。然而，当我试图在自己的代码中模仿相同的函数时，使用“位置：绝对；”放弃了测量。没有它它可以正常工作，但是它的使用使我们能够在一瞬间做到这一点而不会扭曲设计。我的版本在下面，知道为什么它不起作用吗？

    var objStyle = obj[objName].style;

    // Record original style values
    var visibility = objStyle.visibility;
    //var position = objStyle.position;
    var display = objStyle.display;

    // Modify object for measuring
    objStyle.visibility = "hidden";
    //objStyle.position = "absolute";
    objStyle.display = "block";

    // Measure height
    height = obj[objName].clientHeight;

    // Fix object
    objStyle.visibility = visibility;
    //objStyle.position = position;
    objStyle.display = display;

    // Return height
    return parseInt(height);

提前感谢您的帮助。

【问题讨论】：

你在测试什么浏览器？ “不工作”是指你得到一个错误吗？ 0?什么？
如上所述，测量结果不准确。如果我没记错的话，它比正确高度少了 40-50 像素左右，最终通过简单地省略了 position = "absolute";谢谢
您是否在页面上使用了文档类型？

标签： javascript html css dom

【解决方案1】：

我不知道它在不可见时是否有效，但 jQuery 在这里有一些选项 - 特别是 height function;值得一看吗？根据您的示例，类似：

height = $(obj[objName]).height();

【讨论】：

【解决方案2】：

您是只在某些浏览器上看到这个，还是在所有浏览器上看到这个？ Prototype 的 getDimensions() 会检查 Safari（可能还有其他有问题的浏览器），您应该尝试将其也放入您的代码中，看看它是否能解决问题。

这也可能是因为您使用的是 obj[objName] 而不是 document.getElementById() - AFAIK 这些将返回略有不同的对象，这可能会导致您看到的不一致。

【讨论】：

我应该发布更多我的代码。 obj[objName] 是对包含通过 getElementById() 检索的对象的数组的引用。我已经在 Safari 3、昨晚的 WebKit 构建和 Firefox 3.0.7 中测试了我的代码 Prototype 所做的检查与我的情况无关，因为 display 等于 none

【解决方案3】：

我通常使用 .offsetHeight 来测量我的身高，例如：

var h = document.getElementById(divname).offsetHeight;

当我需要测量某物时，如果它有 position:absolute;

当我有两列并且一列是绝对的时，我通常会遇到这种情况，并且如果绝对值大于另一列，则需要将父级向下推。如果它大于另一列的高度，我将使用 offsetHeight 设置父高度。

【讨论】：