如何使用 .offsetHeight 获取元素的高度？

Question

我创建了一个 div 元素

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

然后，我正在做这样的事情...

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是一个数组。

当我运行这个代码labelDiv.style.height出来的时候是0px。我正在寻找这种行为的原因，我发现了这个问题 Element offsetHeight always "0"。正如其中一个答案所建议的，我使用了以下代码

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

确实我得到了 requestAnimationFrame 中标签元素的正确高度，但是 labelDiv.style.height 在下面给出的代码中仍然是 0。
我相信 labelDiv.style.height 仍在 requestAnimationFrame 运行s.

中的代码之前计算

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);
    });

然后。我将上面的代码更改为此，但仍然没有得到正确的输出。在这种情况下，我不会再为 divContainer.offsetHeight

获得 0px

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);
            });
      
        });

上面的代码有什么问题？获取该元素高度的正确方法是什么？

Answer 1

三件事：

你需要给 body 一个高度，因为默认情况下它是 0（0 的 70% 是 0）
你需要在迭代之前将容器追加到正文中（70% 没有父项是 0）
您需要为标签高度添加一个单位（现在它只是一个数字）

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);
});

Answer 2

跟进我的评论。

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>

如何使用 .offsetHeight 获取元素的高度？

how to get height of an element using .offsetHeight?

javascript

requestanimationframe