如何使用.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中得到了 label 元素的正確高度，但在下面給出的代碼中， labelDiv.style.height仍然是 0。
我相信labelDiv.style.height仍在 requestAnimationFrame 中的代碼運行之前進行計算。

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

然后。 我將上面的代碼更改為此，但仍然沒有得到正確的 output。在這種情況下，我不再為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）
• 您需要在迭代之前將容器 append 到主體（無父項的 70% 為 0）
• 您需要在 label 高度上添加一個單位（現在它只是一個數字）

 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>