javascript - Why would jquery return 0 for an offsetHeight when firebug says it's 34?

So I have a div whose content is generated at runtime it initially has no height associated with it. When it's generated according to firebug and from what I can alert with js the div still has a height of 0. However, looking at the read-only properties with firebug I can see that it has an offset height of 34. It's this value that I need. Hopefully it's obvious but in case it isn't, this number is variable, it's not always 38.

So, I thought that I could just get that by doing this via jquery...

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

or this with straight js...

document.getElementById("parentDiv").offsetHeight;

But all that is returned is 0. Does it have anything to do with the fact that offset height is a read-only property in this instance? How can I get this height? I mean firebug is figuring it out somehow so it seems like I should be able to.

Edit: Here's a sample of what the div looks like right now...

<!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=""><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>

This code is being generated by a control in a separate library. So here's the actual code creating it in my .aspx page.

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

Ok, it's edited slightly but thats a whole lot more HTML than I had before. The div I was referring to as "parentDiv" before is called "ctl00_BodyContentPlaceHolder_UserControl" up there. That code includes the div in question, it's sibling, parent, grandparent and children. It's almost a direct copy from firebug.

Update: I should have mentioned this is being done in IE 7. It seemed to work fine one time in Firefox, but it's returning 0 now. Does this provide any new insights of possible work-arounds or anything?

... You all must think I'm nuts.

Update: Some styling...

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

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

So, I thought that I could just get that by doing this via jquery...

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

or this with straight js...

document.getElementById("parentDiv").offsetHeight;

Edit: Here's a sample of what the div looks like right now...

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

This code is being generated by a control in a separate library. So here's the actual code creating it in my .aspx page.

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

... You all must think I'm nuts.

Update: Some styling...

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

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

Share Improve this question edited Nov 15, 2011 at 5:43 community wiki
15 revs, 4 users 99%
Carter

This should be tagged under dom. It has nothing to do with jQuery as you yourself noted. – Chetan S Commented Mar 11, 2009 at 22:03
I'm not sure where I said it has nothing to do with jQuery. I don't know what it has to do with at all, that's my problem, I'll throw the dom tag on there if you like. The caps are generated, that's not my doing. – Carter Commented Mar 11, 2009 at 22:36

Add a comment |

5 Answers 5

Sorted by: Reset to default 5

Are you sure the element is included in the document tree, and rendered? (ie. not “display: none”, but “visibility: hidden” is OK.)

An element that is not actually taking part in the document render process has no dimensions, and will give an offsetWidth/Height of 0.

ETA after code sample added: with your exact code, I get offsetHeight on the div of ‘17’. The first image is sized correctly, the second has no size.

This is correct as rendered(*). Any images that fail to load are replaced by their alt text as an inline span. Your image has no alt text, so it is replaced by an empty string. Normally, as an inline element, this cannot be set to any particular size. The exception is the first image, because you've given it ‘display: block’, which makes it amenable to the explicit sizing provided by width/height.

In Quirks Mode, you would have got little ‘broken image’ icons sized the same as the images were supposed to be. This does not happen in Standards Mode because it is assumed that you know how to use alt text properly if you're using standards.

Either way, the dimensions measurement works fine for me if I replace the "..." URLs with real working addresses.

(*: although you can't actually see it because of the rather weird ‘overflow-hidden’ on html and ‘left: 1597px;’ combo. Well, unless you have a really wide monitor!)

Are you sure it's not a Heisenbug? If you are setting the height somewhere programmatically and then trying to read it soon later, there is a chance DOM would not have updated.

Loading this file with a valid IMG SRC gives 3 alert boxes of "37". Without valid IMG SRC it gives "17" on all three. What version of Jquery are you using? And which version of 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>

Try calling the offset function once all the DOM and images are fully loaded using load() instead of document.ready().

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

I just found an issue where I was getting the offsetHeight of an element when the doc was ready but it was in a container that was hidden.

It resulted in a offsetHeight value of 0 but firebug said it had a height of 32.

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - Why would jquery return 0 for an offsetHeight when firebug says it's 34? - Stack Overflow

5 Answers 5

与本文相关的文章

评论列表(0)