元素 offsetHeight 始终为“0”答案

【问题标题】：Element offsetHeight always "0"元素 offsetHeight 始终为“0”
【发布时间】：2022-04-04 15:44:23
【问题描述】：

为什么我得到 Element offsetHeight "0"？甚至元素原始高度都没有显示

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
/* Added for Menu    */
.navbar
{
  list-style: none;`enter code here`
  padding: 0 10px;
  margin: 0;
  float: left;
  width: 980px;
  background: url(images/navbar.gif) repeat-x;
}
.navbar ul
{
 list-style: none;
  padding: 0px;
  margin: 0;
  float: left;
  width: 260px;
}
.navbar ul li
{
    float:left;
    position:relative;
    z-index:1000;
    margin:0px;
    padding:0px;
}
.navbar ul li ul
{
    display:none;
    border:none;
    width: 260px;
    padding:0 0px 0px 0px;
}
.navbar ul li a
{
     font-size: 12px;
     float:left;
     display:block;
     line-height:3.1em;
     padding:0 16px 0 16px;
     text-decoration:none;
     color:#FFF;
}
.navbar ul li:hover
{
    width:auto;
}
.navbar ul li:hover a
{
    background:url(images/navbar_subnav.png)  repeat-x scroll 0 0 transparent;          text-decoration:none;
}
.navbar ul li:hover ul
{
    display:block;
    position:absolute;
    z-index:998;
    top:0px;
    margin-top:25px;
    left:0;
}
.navbar ul li:hover ul li ul
{
    background-position: center bottombottom;
    cursor: pointer;
}
.navbar ul li:hover ul li a
{
    display:block;
    line-height:1.3em;
    padding:4px 16px 4px 16px;
    border-bottom:1px solid #205284;
    border-left:1px solid #205284;
    border-right:1px solid #205284;
    border-top:1px solid #205284;
    z-index: 10000;
    width:200px;
  }
.navbar ul li:hover ul li a:hover
{
     background-color:#000;
     text-decoration:underline;
     color: #0099FF;
     cursor: hand;

}
.navbar ul li a:hover ul
{
    display:block;
    position:absolute;
    z-index: 998;
    top:3.1em;
    t\op:3.0em;
    left:0;
    marg\in-top:0.1em;
}
.navbar ul li a:hover ul li a
 {
    display:block;
    height:1px;
    line-height:1.3em;
    padding:4px 16px 4px 16px;
    background-color:#000;
    font-weight:normal;
    color:#FFF;
}
.navbar ul li a:hover ul li a ul
{
    visibility:hidden;
    height:0px;
    width:0px;
    position:absolute;
    z-index: 997;
}
.navbar ul li a:hover ul li a:hover
{
    background-color:#000;
    text-decoration:underline;
}

</style>
</head>

<body>
<div class="navbar">
<ul>
            <li>
                <a href="#">menu item 1</a>
                <ul style="top:0px" >
                    <li style="width:288px;"><center><a href="#" onmouseover="movedown()" onmouseout="stopscroll()"><img src="images/menu-arrow-down.png" width="8" height="6"   alt="Down"></a></center></li>
<script> //<![CDATA[
var speed=2
iens6=document.all||document.getElementById
ns4=document.layers
if (iens6){
document.write('<div id="container" style="position:relative;width:310px;height:165px;overflow:hidden;border:0px solid #205284">')
document.write('<div id="content" style="position:absolute;width:290px;left:0px;top:-1px;">')
}
//]]></script>
<ilayer name="nscontainer" width="190">
<layer name="nscontent" width="290" height="155" visibility="hidden">
                    <li style="top:-1px;"><a href="#">sub menu item 1  menu item 1</a></li>
                    <li style="top:-1px;"><a href="#">sub menu item 2  menu item 1</a></li>                    <li style="top:-1px;"><a href="#">sub menu item 3</a></li>
                    <li style="top:-1px;"><a href="#">sub menu item 1</a></li>
                    <li style="top:-1px;"><a href="#">sub menu item 1</a></li>
                    <li style="top:-1px;"><a href="#">sub menu item 2</a></li>              
                    <li style="top:-1px;"><a href="#">sub menu item 3</a></li>
                    <li style="top:-1px;"><a href="#">sub menu item 1</a></li>
                    <li style="top:-1px;"><a href="#">sub menu </a></li>
                    <li style="top:-1px;"><a href="#">sub menu </a></li>
                    <li style="top:-1px;"><a href="#">sub menu </a></li>
                    <li style="top:-1px;"><a href="#">sub menu </a></li>              
                    <li style="top:-1px;"><a href="#">sub menu </a></li>
                    <li style="top:-1px;"><a href="#">sub menu</a></li>

</layer>
</ilayer>
<script> //<![CDATA[
if (iens6)
{
document.write('</div></div>')
var crossobj=document.getElementById? document.getElementById('content') : document.all.content
//alert("document.getElementById('content').offsetHeight :"+ document.getElementById('content').offsetHeight);
alert("crossobj.prototype.outerHeight" + crossobj.prototype.outerHeight);
var contentheight=crossobj.offsetHeight
//var contentheight=document.getElementById('content').style.height;
//alert("ContentHeight :"+contentheight);
}
else if (ns4)
{
    var crossobj=document.nscontainer.document.nscontent
    var contentheight=crossobj.clip.height
}
function movedown(){
if (window.moveupvar) clearTimeout(moveupvar)
{
    if (iens6&&parseInt(crossobj.style.top)>=(contentheight*(-1)+100))
    {
        crossobj.style.top=parseInt(crossobj.style.top)-speed+"px"
    }
    else if(ns4&&crossobj.top>=(contentheight*(-1)+100))
    {
        crossobj.top-=speed
    }
    /*else
    {
        crossobj.style.top=parseInt(crossobj.style.top)-speed+"px"
    }*/
}
    movedownvar=setTimeout("movedown()",20)
}
function moveup()
{
    if (window.movedownvar) clearTimeout(movedownvar)
    {
        if (iens6&&parseInt(crossobj.style.top)<=0)
        {
        crossobj.style.top=parseInt(crossobj.style.top)+speed+"px"
        }
        else if (ns4&&crossobj.top<=0)
        {
        crossobj.top+=speed
        }
        moveupvar=setTimeout("moveup()",20)
    }
}
function getcontent_height()
{
    if (iens6)
    {
        //alert("getcontent_height : "+document.getElementById("content").style.height);
        //contentheight=document.getElementById("content").style.height;
        contentheight=crossobj.offsetHeight
    }
    else if (ns4)
    {
        document.nscontainer.document.nscontent.visibility="show"
    }
}
window.onload=getcontent_height;
//]]></script>
                    <li><center><a href="#" onmouseover="moveup()" onmouseout="stopscroll()"><img src="images/menu-arrow-down.png" width="8" height="6" alt="Down"></a> </center></li>
                </ul>
            </li>
           </ul> 
      </div>    
</body>
</html>

【问题讨论】：

标签： javascript html css

【解决方案1】：

有时 offsetHeight 会返回零，因为您创建的元素尚未在 Dom 中呈现。我为这种情况编写了这个函数：

function getHeight(element)
{
    element.style.visibility = "hidden";
    document.body.appendChild(element);
    var height = element.offsetHeight + 0;
    document.body.removeChild(element);
    element.style.visibility = "visible";
    return height;
}

【讨论】：

我遇到了元素从其原始位置消失的问题。将element = element.cloneNode(true); 添加到函数顶部修复它。
身体出现这种情况怎么办？
@merhoo 你不会使用上面的函数。你是说document.body.offsetHeight 等于“0”吗？此测量是在load event 之前还是之后进行的？正文的所有动态附加内容（如果有的话）都渲染了吗？ body 的内容是否只包含绝对定位的元素？

【解决方案2】：

您正在尝试获取隐藏元素的offsetHeight。 css .navbar ul li ul 有 display:none 会使其所有内容不可见，包括 crossobj 并且您无法获得未显示元素的高度，它们的高度只是放在 0。

【讨论】：

嗨，感谢您的回复.. 基于其显示子菜单上的唯一菜单，如果我删除该菜单，则默认情况下它的显示菜单和子菜单...您能帮我防止这种情况发生吗.. .
这个问题有一个技巧，你可以将你的标签定位在 -1000px -1000px 附近，而不是使用display:none，然后使用offsetHeight 来测量高度，而不是改变你的显示。需要更改位置以使标签可见

【解决方案3】：

更新

应用于 DOM 元素的更改不会立即应用，在单个执行周期中对 DOM 所做的所有更改都会收集并在一次重绘中应用。

因此，您需要等待重绘完成，然后再尝试读取元素的更新尺寸。

requestAnimationFrame 是在每次重绘之前执行的方法。

requestAnimationFrame(() => {
  element = document.getElementById("your_ID");
  let height = element.offsetHeight;
  console.log("debug height: " + height);
});

【讨论】：

我知道我应该，变得懒惰。更新了，谢谢你让我保持直言不讳；）

【解决方案4】：

另一个“技巧”是暂时将对象的可见性设置为hidden，使其显示被阻止。然后获取offsetHeight。然后通过将显示设置为none 并将可见性设置为visible 来反转它。当然，这只有在不破坏页面布局流程的情况下才有效（即，页面中的所有内容都在移动，就好像有什么东西在那里一样，但空间中什么都没有显示）。但是，如果它是 z 索引或浮动或绝对定位的东西，它应该可以正常工作。

【讨论】：

【解决方案5】：

有一种更简单的方法可以做到这一点。我有许多具有不同 ID 和名称的 iframe，所以这就是我所做的。我在父窗口中添加了按钮，单击时会这样做

var iWin = document.querySelector(your iframe id here).contentWindow;
iWin.postMessage("button is clicked","*");
//you can send the id of the required frame as the message

把它放在子窗口脚本中。

window.onload = function(){
          window.addEventListener('message',(e)=>{
            if(e.data == "showcomment"){
              //I am just sending the height and iframe name cause I have many iframes 
              //with different names  
              window.parent.postMessage({winHeight:document.body.offsetHeight,winName: 
              window.name},"*");
            }
          });
    }

现在最后一步把它放在父窗口脚本中

window.addEventListener('message',(e)=>{
//here I am getting element with that name and setting its height you can change it
document.getElementsByName(`${e.data.winName}`)[0].height = e.data.winHeight + 10;
//I added 10 as extra height , you can ignore it

})

【讨论】：