OffsetWidth 始终为“0”答案

【问题标题】：OffsetWidth is always '0'OffsetWidth 始终为“0”
【发布时间】：2023-01-19 22:21:33
【问题描述】：

我在创造某些东西的同时被某些东西困住了。我想将 div 的宽度和高度设置为相同。因此，我将 div 的宽度设置为 14%，将 div 的高度设置为 offsetWidth。所以 div 的形状将是完全正方形的。但是，offsetWidth 始终为 0。我尝试了几种方法，但 offsetWidth 为零。

代码


<body></body>

<script>

var elem = document.createElement('div');

elem.style.display = 'inline-block';

elem.style.backgroundColor = '#00B3FF';

elem.style.width = '14%';

elem.innerText = elem.offsetWidth;

document.body.appendChild(elem);

</script>

Fiddle

【问题讨论】：

在将它附加到 DOM 之前，offsetWidth 将为零。
14%到目前为止一无所有。

标签： javascript element offsetwidth

【解决方案1】：

您所要做的就是放置那段代码：

document.body.appendChild(elem);

以上：

elem.innerText = elem.offsetWidth;

所以它看起来像这样：

var elem = document.createElement('div');
elem.style.display = 'inline-block';
elem.style.backgroundColor = '#00B3FF';
elem.style.width = '14%';
document.body.appendChild(elem);
elem.innerText = elem.offsetWidth;

因为在将 div 附加到正文之前宽度为 0。

【讨论】：

【解决方案2】：

有没有你不使用CSS的原因？使用 aspect-ratio: 1/1 你会得到相同的结果。

https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio

【讨论】：

【解决方案3】：

我认为某些父元素有 display: hidden 或没有。如果元素是隐藏的（例如，通过将元素或其祖先之一的 style.display 设置为“无”），则返回 0。

也许这个文档可以提供帮助：https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetWidth

【讨论】：