how to get height of an element using .offsetHeight?

Question

I created a div element

let divContainer = document.createElement("div");
divContainer.style.height = "70%";
divContainer.id = "container";

Then, I am doing something like this...

labels.forEach(label => {
        let labelDiv = document.createElement("div");
        labelDiv.className = "label";
        labelDiv.style.height = divContainer.offsetHeight / labels.length; // here I want to retrieve the length of the divContainer in pixels.
        divContainer.appendChild(labelDiv);
    });

label is an array.

When I run this code labelDiv.style.height comes out to be 0px. I was looking for a reason for this behaviour and I found this question Element offsetHeight always "0". As suggested in one of the answers, I used the following code

requestAnimationFrame(() => {
    /* should be able to get offsetHeight here */
    console.log(divContainer.offsetHeight); 
};

and indeed I got the correct height for the label element inside the requestAnimationFrame but labelDiv.style.height is still 0 in the code given below.
I believe labelDiv.style.height is still being calculated before the code in requestAnimationFrame runs.

let divContainer = document.createElement("div");
    divContainer.style.height = "70%";
    divContainer.id = "container";


    requestAnimationFrame(() => {
        /* should be able to get offsetHeight here */
        console.log(divContainer.offsetHeight);
    });

    labels.forEach(label => {
        let labelDiv = document.createElement("div");
        labelDiv.className = "label";
        labelDiv.style.height = divContainer.offsetHeight / labels.length;
     
        divContainer.appendChild(labelDiv);
    });

Then. I changed the above code to this but still, I am not getting the correct output. In this case I am not again getting 0px for divContainer.offsetHeight

let divContainer = document.createElement("div");
        divContainer.style.height = "70%";
        divContainer.id = "container";


        requestAnimationFrame(() => {
            /* should be able to get offsetHeight here */
            console.log(divContainer.offsetHeight);
            labels.forEach(label => {
                let labelDiv = document.createElement("div");
                labelDiv.className = "label";
                labelDiv.style.height = divContainer.offsetHeight / labels.length;
         
                divContainer.appendChild(labelDiv);
            });
      
        });

What is wrong with the above code? What's the proper way to get the height of that element?

Are you inserting your `divContainer` into the DOM, if so, can you show us where? — Roberto Murguia, Jul 17 '20 at 23:19
percent heights in css are weird... just adding `height: 70%` will typically not do what you are expecting. If you open the inspector and inspect your `divContainer` do you see the height you expect? I suspect you would need to alter your styles to size the div correctly rather than fix an error in your js. As a test, change the `70%` to `70px`. — redouglas, Jul 17 '20 at 23:20
A couple things, 1. The parent of divContainer must have a set height; 2. insert divContainer, 3. for the line `labelDiv.style.height = divContainer.offsetHeight / labels.length` you need to add `+ "px"`., and 4. you might try `getBoundingClientRect().height` instead. — EvanMorrison, Jul 17 '20 at 23:25

score 2 · Accepted Answer · answered Jul 17 '20 at 23:28

Three things:

you need to give body a height, since by default that's 0 (70% of 0 is 0)
you need to append the container to the body before iterating (70% of no parent is 0)
you need to add a unit to the label heights (right now it's just a number)

let labels = ["A", "B", "C"];

document.body.style.height = "500px";
let divContainer = document.createElement("div");

divContainer.style.height = "70%";
divContainer.style.backgroundColor = "red";
divContainer.id = "container";
document.body.append(divContainer) 
labels.forEach(label => {
    console.log(divContainer.offsetHeight)
    let labelDiv = document.createElement("div");
    labelDiv.className = "label";
    labelDiv.style.height = divContainer.offsetHeight / labels.length + "px";
    labelDiv.style.background = "blue";
    divContainer.appendChild(labelDiv);
});

score 0 · Answer 2 · answered Jul 17 '20 at 23:30

To follow up on my comment.

document.getElementById("app").innerHTML = `
<h1>Label Boxes!</h1>
`;

let labels = ["label1", "label2", "label3", "label4", "label5"];
let divContainer = document.createElement("div");
divContainer.style.height = "70%";
divContainer.style.border = "2px solid palevioletred";
divContainer.id = "container";
document.body.appendChild(divContainer);

requestAnimationFrame(() => {
  /* should be able to get offsetHeight here */
  console.log(divContainer.getBoundingClientRect().height);
  labels.forEach(label => {
    let labelDiv = document.createElement("div");
    labelDiv.className = "label";
    labelDiv.style.height = divContainer.getBoundingClientRect().height / labels.length + "px";
    labelDiv.style.border = "1px solid palegreen";
    divContainer.appendChild(labelDiv);
  });
});

html, body {
  height: 100%;
 }

<div id="app"></div>

how to get height of an element using .offsetHeight?

2 Answers2