如何从javascript获取内联块字段集的显示宽度

Question

如果你有一个带有 display： inline-block 的字段集，它的宽度取决于它所包含的元素。您可以看到它，但假设：

<fieldset id='fs' style='display: inline-block'>
<input type=number>
</fieldset>
<script>
var fs=document.getElementById("fs");
console.log("fs.width:",fs.width);
</script>

唯一的输出将是：

fs.width: undefined

在尝试了很多事情之后，我终于能够像这样得到它：

<script>
var fs=document.getElementById("fs");
var fsrects=fs.getClientRects();
var fswidth=fsrects[0].right-fsrects[0].left;
console.log("fswidth:",fswidth);
</script>

然后输出是

fswidth: 98.6640625

一定有更简单的方法！帮助！！！

Answer 1

您可能正在寻找 offsetWidth。

HTMLElement.offsetWidth 只读属性返回元素的布局宽度。通常，元素的 offsetWidth 是一种度量，它包括元素边框、元素水平填充、元素垂直滚动条(如果存在，如果呈现(和元素 CSS 宽度。

var fs=document.getElementById("fs");
console.log("fs.width:",fs.offsetWidth);

<fieldset id='fs' style='display: inline-block'>
<input type=number>
</fieldset>