javascript - 元素的 clientWidth 为 0 除非我用 css 设置它

Question

如何获取元素宽度而不在 CSS 中设置其宽度属性？如果我设置了宽度，它就可以工作，但如果我不设置宽度，即使我在使用调试器检查后发现它不是，宽度也只是 0。

let width = this.htmlElement.clientWidth;

HTML

<label [model]="foobar">0</label>

Answer 1

使用offsetWidth代替

let width = this.htmlElement.offsetWidth;

docs 中的第一行clientWidth 是

The Element.clientWidth property is zero for elements with no CSS or inline layout boxes, otherwise it's the inner width of an element in pixels

另一方面，offsetWidth 是一个只读属性，它返回元素的布局宽度，无论元素是否使用给定宽度进行样式化。

var el = document.getElementById('foobar');

console.log('clientWidth : '+ el.clientWidth );
console.log('offsetWidth : '+ el.offsetWidth );

<label id="foobar">This has width ..................</label>