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

我创建了一个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);
    });

标签

是一个数组

当我运行这个代码时，

labelDiv.style.height

显示为0px。 我在寻找这种行为的原因，我发现了这个问题。 正如其中一个答案中所建议的，我使用了以下代码

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

实际上，我得到了

requestAnimationFrame

中label元素的正确高度，但是

labelDiv.style.height

在下面给出的代码中仍然是0。
我相信在requestAnimationFrame中的代码运行之前，

labelDiv.style.height

仍在计算中

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

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

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

三件事：

• 您需要为body指定一个高度，因为默认情况下该高度为0（0的70%为0）
• 您需要在迭代之前将容器附加到主体（70%的无父对象为0）
• 您需要向标签高度添加一个单位（现在只是一个数字）

let labels=[“A”、“B”、“C”]；
document.body.style.height=“500px”；
让divContainer=document.createElement（“div”）；
divContainer.style.height=“70%”；
divContainer.style.backgroundColor=“红色”；
divContainer.id=“container”；
document.body.append（divContainer）
labels.forEach（label=>{
console.log（divContainer.offsetHeight）
设labelDiv=document.createElement（“div”）；
labelDiv.className=“label”；
labelDiv.style.height=divContainer.offsetHeight/labels.length+“px”；
labelDiv.style.background=“蓝色”；
divContainer.appendChild（labelDiv）；
});三件事：


您需要为body指定一个高度，因为默认情况下该高度为0（0的70%为0）
您需要在迭代之前将容器附加到主体（70%的无父对象为0）
您需要向标签高度添加一个单位（现在只是一个数字）


let labels=[“A”、“B”、“C”]；
document.body.style.height=“500px”；
让divContainer=document.createElement（“div”）；
divContainer.style.height=“70%”；
divContainer.style.backgroundColor=“红色”；
divContainer.id=“container”；
document.body.append（divContainer）
labels.forEach（label=>{
console.log（divContainer.offsetHeight）
设labelDiv=document.createElement（“div”）；
labelDiv.className=“label”；
labelDiv.style.height=divContainer.offsetHeight/labels.length+“px”；
labelDiv.style.background=“蓝色”；
divContainer.appendChild（labelDiv）；
});以跟进我的评论


document.getElementById（“应用”）.innerHTML=`
标签盒！
`;
设标签=[“label1”、“label2”、“label3”、“label4”、“label5”]；
让divContainer=document.createElement（“div”）；
divContainer.style.height=“70%”；
divContainer.style.border=“2px实心palevioletred”；
divContainer.id=“container”；
document.body.appendChild（divContainer）；
requestAnimationFrame（（）=>{
/*应该可以在这里离开视线*/
log（divContainer.getBoundingClientRect（）.height）；
labels.forEach（label=>{
设labelDiv=document.createElement（“div”）；
labelDiv.className=“label”；
labelDiv.style.height=divContainer.getBoundingClientRect（）.height/labels.length+“px”；
labelDiv.style.border=“1px纯色淡绿色”；
divContainer.appendChild（labelDiv）；
});
});
html，正文{
身高：100%；
}
跟进我的评论


document.getElementById（“应用”）.innerHTML=`
标签盒！
`;
设标签=[“label1”、“label2”、“label3”、“label4”、“label5”]；
让divContainer=document.createElement（“div”）；
divContainer.style.height=“70%”；
divContainer.style.border=“2px实心palevioletred”；
divContainer.id=“container”；
document.body.appendChild（divContainer）；
requestAnimationFrame（（）=>{
/*应该可以在这里离开视线*/
log（divContainer.getBoundingClientRect（）.height）；
labels.forEach（label=>{
设labelDiv=document.createElement（“div”）；
labelDiv.className=“label”；
labelDiv.style.height=divContainer.getBoundingClientRect（）.height/labels.length+“px”；
labelDiv.style.border=“1px纯色淡绿色”；
divContainer.appendChild（labelDiv）；
});
});
html，正文{
身高：100%；
}
您是否将您的
divContainer
插入DOM，如果是，您能告诉我们在哪里吗？css中的百分比高度很奇怪。。。仅仅添加
高度：70%
通常不会达到预期效果。如果您打开inspector并检查您的
divContainer
，您是否看到您期望的高度？我怀疑您需要更改样式以正确调整div的大小，而不是修复js中的错误。作为一项测试，将
70%
更改为
70px
。divContainer的父级必须具有设置的高度；2.插入div容器，3。对于行
labelDiv.style.height=divContainer.offsetHeight/labels.length
，需要添加
+“px”
，以及4。您可以尝试使用
getBoundingClientRect（）.height
替代。是否将
divContainer
插入DOM中，如果是，您能告诉我们在哪里吗？css中的百分比高度很奇怪。。。仅仅添加
高度：70%
通常不会达到预期效果。如果您打开inspector并检查您的
divContainer
，您是否看到您期望的高度？我怀疑您需要更改样式以正确调整div的大小，而不是修复js中的错误。作为一项测试，将
70%
更改为
70px
。divContainer的父级必须具有设置的高度；2.插入div容器，3。对于行
labelDiv.style.height=divContainer.offsetHeight/labels.length