Question

所以我有一个div，其内容是在运行时生成的，它最初没有与之关联的高度。当它根据firebug生成时，我可以通过js警告，div仍然具有0的高度。但是，用firebug查看只读属性我可以看到它的偏移高度为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，它是兄弟姐妹，父母，祖父母和孩子。这几乎是萤火虫的直接拷贝。

更新的我应该已经提到这是在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;
}

Answer 1

您确定元素是否包含在文档树中并呈现？（即不是“display：none”，但“visibility：hidden”是可以的。）

实际上没有参与文档渲染过程的元素没有维度，并且offsetWidth / Height为0。

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

这与渲染（*）一样正确。任何无法加载的图像都会被替换为替换文本作为内联跨度。您的图片没有替代文字，因此它被替换为空字符串。通常，作为内联元素，不能将其设置为任何特定大小。例外是第一个图像，因为你已经给它'display：block'，这使得它适合宽度/高度提供的显式尺寸。

在怪癖模式中，你会得到一些“破碎图像”图标大小与图像应该相同。在标准模式下不会发生这种情况，因为如果您使用标准，则假定您知道如何正确使用替代文字。

无论哪种方式，如果我用实际工作地址替换“...”网址，尺寸测量工作正常。

（*：虽然你实际上看不到它，因为html和'left：1597px;'组合上相当奇怪的'溢出隐藏'。好吧，除非你有真的宽监视！）

Answer 2

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

Answer 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>

Answer 4

尝试使用load（）而不是document.ready（）完全加载所有DOM和图像后调用偏移函数。

$（window）.load（function（）{ //在这里放置高度的代码 }）;

Answer 5

我刚刚发现了一个问题，即当文档准备就绪时我得到了一个元素的offsetHeight，但是它位于隐藏的容器中。

它导致offsetHeight值为0，但是firebug表示它的高度为32。

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

5 个答案: