javascript - clientWidth of element is 0 unless I set it with css

Question

How can I get an elements width without setting it's width property in CSS? If I set the width it works, but if I don't the width is just 0 even though I can see it's not after inspecting with debugger.

let width = this.htmlElement.clientWidth;

HTML

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

Answer 1

Use offsetWidth instead

let width = this.htmlElement.offsetWidth;

The first line in the docs for clientWidth is

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

The offsetWidth on the other hand is a read-only property that returns the layout width of an element, regardless of wether or not the element is styled with a given width.

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

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

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