Element offsetHeight always "0"

Question

Why I am getting Element offsetHeight "0"? even element original height is not showing





Untitled Document






            
                menu item 1
                
                    



                    sub menu item 1  menu item 1
                    sub menu item 2  menu item 1
                    sub menu item 3
                    sub menu item 1
                    sub menu item 1
                    sub menu item 2              
                    sub menu item 3
                    sub menu item 1
                    sub menu 
                    sub menu 
                    sub menu 
                    sub menu               
                    sub menu 
                    sub menu

user_10166336 · Answer

UPDATE

Changes applied to the DOM elements are not applied immediately, all the changes made to the DOM in a single execution cycle are collected and applied in one repaint.

So you need to wait for the repaint to complete before trying to read the updated dimensions of the element.

requestAnimationFrame is a method that is executed before every repaint.

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

user_1287615 · Answer

Another "trick" is to momentarily set the objects visibility to hidden, its display to block. And then get the offsetHeight. Then just reverse that by setting display to none and visibility to visible. Of course this will only work if it will not disrupt the flow of the page layout (i.e. everything shifts in the page as if something is there, but nothing is displayed in the space). But if it is something that is z-indexed or floating or perhaps absolute positioned it should work fine.

user_11618108 · Answer

There is a more easiest way to do that. I had many iframes with different IDs and names so here is what I did. I added the button in the parent window, which on click does this

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

Put this inside the child window script.

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},"*");
            }
          });
    }

Now last step put this in the parent window script

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

})

Element offsetHeight always "0"

5 Answers