当firebug说它是34时，为什么jquery会为offsetHeight返回0？答案

【问题标题】：Why would jquery return 0 for an offsetHeight when firebug says it's 34?当firebug说它是34时，为什么jquery会为offsetHeight返回0？
【发布时间】：2009-03-11 21:34:56
【问题描述】：

所以我有一个 div，它的内容是在运行时生成的，它最初没有与之关联的高度。当它是根据萤火虫生成的，并且从我可以用 js 发出警报时，div 的高度仍然为 0。但是，用萤火虫查看只读属性，我可以看到它的偏移高度为 34。正是这个值我需要。希望这很明显，但如果不是，这个数字是可变的，并不总是 38。

所以，我认为我可以通过 jquery 做到这一点......

$("#parentDiv").attr('offsetHeight');

或者这个直接用js...

document.getElementById("parentDiv").offsetHeight;

但是返回的都是0。这与偏移高度在这种情况下是只读属性这一事实有关吗？我怎样才能达到这个高度？我的意思是萤火虫正在以某种方式解决它，所以看起来我应该能够。

编辑： 这是 div 现在的样例...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML Strict//EN"><META http-equiv="Content-Type" content="text/html; charset=utf-8">

<HTML style="OVERFLOW: hidden; HEIGHT: 100%" xmlns="http://www.w3.org/1999/xhtml"><BODY><FORM id="aspnetForm" name="aspnetForm" action="blah.aspx" method="post"><DIV id="container">

<DIV id="ctl00_BodyContentPlaceHolder_Navigation" style="Z-INDEX: 1; LEFT: 1597px; POSITION: absolute; TOP: 67px">
    <DIV class="TransparentBg" id="TransparentDiv" style="MARGIN-TOP: 10px; MARGIN-RIGHT: 10px; HEIGHT: 94px; TEXT-ALIGN: center">
    </DIV>
    <DIV class="Foreground" id="ForegroundId" style="MARGIN-TOP: 10px; MARGIN-RIGHT: 10px; TEXT-ALIGN: center">
        <DIV id="ctl00_BodyContentPlaceHolder_Navigation1" style="WIDTH: 52px; COLOR: black; HEIGHT: 52px; BACKGROUND-COLOR: transparent; -moz-user-focus: normal">
            <IMG style="FILTER: progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod = scale src='../images/image.gif'); CURSOR: pointer" height="52" hspace="0" src="..." width="52" /> 
        </DIV>
        <DIV id="ctl00_BodyContentPlaceHolder_UserControl" name="ctl00_BodyContentPlaceHolder_UserControl">
            <IMG style="DISPLAY: block; VERTICAL-ALIGN: bottom; CURSOR: pointer" height="17" src="..." width="16" />
            <IMG style="VERTICAL-ALIGN: top; CURSOR: pointer" height="17" src="..." width="16" />
        </DIV>
    </DIV>
</DIV>

</DIV></FORM></BODY></HTML>

此代码由单独库中的控件生成。所以这是在我的 .aspx 页面中创建它的实际代码。

<blah:blahControl ID="control" runat="server" />

好的，它稍作编辑，但 HTML 比我以前的要多得多。我之前称为“parentDiv”的 div 在上面被称为“ctl00_BodyContentPlaceHolder_UserControl”。该代码包括有问题的 div，它是兄弟姐妹、父母、祖父母和孩子。它几乎是 firebug 的直接复制品。

更新： 我应该提到这是在 IE 7 中完成的。它似乎在 Firefox 中运行良好，但现在返回 0。这是否提供了关于可能的变通办法或任何东西的任何新见解？

...你们一定认为我疯了。

更新： 一些样式...

.TransparentBg 
{
    background-color: white;
    filter:alpha(opacity=50);
    -moz-opacity:0.5;
    -khtml-opacity: 0.5;
    opacity: 0.5;
}

.Foreground
{
    position: absolute;
    top: 0px;
}

【问题讨论】：

这应该被标记在 dom 下。正如您自己所指出的，它与 jQuery 无关。
我不确定我在哪里说它与 jQuery 无关。我根本不知道它有什么关系，这是我的问题，如果你愿意，我会把 dom 标签扔在那里。上限是生成的，这不是我做的。

标签： javascript jquery dom

【解决方案1】：

您确定该元素已包含在文档树中并被渲染了吗？（即不是“显示：无”，但“可见性：隐藏”是可以的。）

实际上没有参与文档渲染过程的元素没有尺寸，并且会给出 0 的 offsetWidth/Height。

添加代码示例后的 ETA：使用您的确切代码，我在“17”的 div 上得到 offsetHeight。第一张图片大小正确，第二张没有大小。

这是正确的渲染（*）。任何无法加载的图像都将替换为它们的替代文本作为内联跨度。您的图像没有替代文本，因此它被一个空字符串替换。通常，作为内联元素，它不能设置为任何特定的大小。第一张图片是个例外，因为你给了它“display: block”，这使它可以接受由宽度/高度提供的显式尺寸。

在 Quirks 模式下，您会看到一些“破损图像”图标，其大小与图像应有的大小相同。这在标准模式下不会发生，因为假设您知道在使用标准时如何正确使用替代文本。

无论哪种方式，如果我将“...”网址替换为真实的工作地址，尺寸测量对我来说效果很好。

(*: 虽然你实际上看不到它，因为 html 和 'left: 1597px;' 组合上相当奇怪的 'overflow-hidden' 。好吧，除非你有一个 really 宽监控！）

【讨论】：

你能把测试用例放到网上吗？如果我使用您在上面发布的 sn-p，然后使用 alert(document.getElementById("parentDiv").offsetHeight)，我会得到预期的高度。
对于我现在在那里的代码，如果我像这样发出警报，除了 ctl00_BodyContentPlaceHolder_UserControl 我得到 0 返回。
抱歉，图片确实有替代文字。我编辑了来源和替代文本。我从来不知道它会有所作为，每天都学习新东西！我也可以看到，我确实有一个大显示器，但左边是根据屏幕分辨率生成的。放弃我的决议会改变它的价值。

【解决方案2】：

你确定不是Heisenbug？如果您以编程方式在某处设置高度，然后稍后尝试读取它，则 DOM 可能不会更新。

【讨论】：

【解决方案3】：

使用有效的 IMG SRC 加载此文件会给出 3 个“37”的警报框。如果没有有效的 IMG SRC，它会在所有三个上给出“17”。您使用的是什么版本的 Jquery？以及哪个版本的 FireFox/IE？

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML Strict//EN"><META http-equiv="Content-Type" content="text/html; charset=utf-8">
<HTML style="OVERFLOW: hidden; HEIGHT: 100%" xmlns="http://www.w3.org/1999/xhtml">
<HEAD>
    <script type="text/javascript" src="jquery.js"></script>
</HEAD>
<BODY>
    <FORM id="aspnetForm" name="aspnetForm" action="blah.aspx" method="post">
        <DIV id="container">
            <DIV id="ctl00_BodyContentPlaceHolder_Navigation" style="Z-INDEX: 1; LEFT: 1597px; POSITION: absolute; TOP: 67px">
                <DIV class="TransparentBg" id="TransparentDiv" style="MARGIN-TOP: 10px; MARGIN-RIGHT: 10px; HEIGHT: 94px; TEXT-ALIGN: center">
                </DIV>
                <DIV class="Foreground" id="ForegroundId" style="MARGIN-TOP: 10px; MARGIN-RIGHT: 10px; TEXT-ALIGN: center">
                    <DIV id="ctl00_BodyContentPlaceHolder_Navigation1" title="Click to pan the map." style="WIDTH: 52px; COLOR: black; HEIGHT: 52px; BACKGROUND-COLOR: transparent; -moz-user-focus: normal">
                        <IMG style="FILTER: progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod = scale src='../images/image.gif'); CURSOR: pointer" height="52" hspace="0" src="..." width="52" /> 
                    </DIV>
                    <DIV id="ctl00_BodyContentPlaceHolder_UserControl" name="ctl00_BodyContentPlaceHolder_UserControl">
                        <IMG style="DISPLAY: block; VERTICAL-ALIGN: bottom; CURSOR: pointer" height="17" src="je_fanmap_unavailable.JPG" width="16" />
                        <IMG style="VERTICAL-ALIGN: top; CURSOR: pointer" height="17" src="je_fanmap_unavailable.JPG" width="16" />
                    </DIV>
                </DIV>
            </DIV>
            <script type="text/javascript">
                $(window).load(function () {
                alert($("#ctl00_BodyContentPlaceHolder_UserControl").attr('offsetHeight'));
                alert(document.getElementById("ctl00_BodyContentPlaceHolder_UserControl").offsetHeight);
                alert($("#ctl00_BodyContentPlaceHolder_UserControl").height());
                });
            </script>
        </DIV>
    </FORM>
</BODY>

【讨论】：

我认为这是根据屏幕分辨率生成的。有问题的 div 可以很好地显示在我的屏幕上。我在那里发布的每一段代码都是由 ASP.Net 生成的。
刚刚测试过，不影响任何东西。但是，我确实得到了正确返回的高度。
嗯，有趣... IE 7，jQuery 1.3.1
当我为此使用 Firefox 时，我得到了有效的高度。这太棒了，因为它只会与 IE7 一起使用。
我在 IE6 ("34")、IE7 ("38") 和 FireFox ("37") 中使用 jQuery 1.3.2 得到非零答案。如果您将图像从属性 height/width 切换到 style="height/width" 则所有 3 个浏览器都显示“34”。

【解决方案4】：

在所有 DOM 和图像都使用 load() 而不是 document.ready(). 完全加载后，尝试调用 offset 函数

$(window).load(function () {
    //Put the code for the height here
});

【讨论】：

感谢您的洞察力，但仍然没有运气。

【解决方案5】：

我刚刚发现了一个问题，当文档准备好时，我正在获取元素的 offsetHeight，但它位于 隐藏的容器中。

它导致 offsetHeight 值为 0，但萤火虫说它的高度为 32。

【讨论】：