[英]how to get height of an element using .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);
});
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);
});
});
上面的代码有什么问题? 获取该元素高度的正确方法是什么?
三件事:
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); });
跟进我的评论。
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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.