当getBoundingClientRect正确时，clientWidth和clientHeight报告为零

Question

In MDN's description of Element.clientWidth it says.

_{Note: I've since updated MDN according to @potatopeelings answer.}

The Element.clientWidth property is the inner width of an element in pixels. It includes padding but not the vertical scrollbar (if present, if rendered), border or margin.

This property will round the value to an integer. If you need a fractional value, use element.getBoundingClientRect().

From this I understand that other than rounding clientWidth should be the same as getBoundingClientRect().width .

However I see that for many elements (where display is inline ?) the clientWidth (and height) are zero, while the values returned by getBoundingClientRect seem correct.

Searching on stackoverflow brings some answers saying that this happens before the document is in a ready state but I see this all the time, not just when the page is loading.

This behaviour is consistent for all browsers I checked, where is it specified that this should be the behaviour?

Sample:

 function str(name, width, height) { return name + ': (' + width + ', ' + height + ')'; } function test() { var s = document.getElementById('s'); var rect = s.getBoundingClientRect(); document.getElementById('out').innerHTML = str('client', s.clientWidth, s.clientHeight) + '<br/>' + str('bounding', rect.width, rect.height); } 

  <span id="s">A span</span><br/> <button onclick="test()">Test</button> <hr /> <div id="out"></div> 

Answer 1

From the spec ( http://www.w3.org/TR/cssom-view/#dom-element-clientwidth )

The clientWidth attribute must run these steps:

1.If the element has no associated CSS layout box or if the CSS layout box is inline , return zero .
...

Answer 2

In addition to @potatopeelings's answer:

Inline elements have no intrinsic or specified dimensions. Eg you cannot define a width for a span (unless you change it's display property).

Also clientWidth and getBoundingClientRect serve different purposes and may return different values. The latter also considers transforms and returns the dimensions of an element as it is actually rendered.

.class {
  transform: scale(0.5);
}

If clientWidth returned 1000 in this case then the width of getBoundingClientRect would be 500.

You can regard clientWidth as "how much space do I have available within the element" and getBoundingClientRect as "how much space does the element occupy on the screen". So in our case the element would have enough space to contain two 500px elements side by side and it would occupy 500px on the screen.

Answer 3

The returned value from getBoundingClientRect() is a DOMRect object which is the union of the rectangles returned by getClientRects() for the element ; this method looks at the bounding box dimension even if the element is inline (it doesn't have the limit for inline elements clientWidth has - specs @potatopeelings links).

 function str(name, width, height) { return name + ': (' + width + ', ' + height + ')'; } function test() { var s = document.getElementById('s'); var rect = s.getBoundingClientRect(); document.getElementById('out').innerHTML = str('client', s.clientWidth, s.clientHeight) + '<br/>' + str('bounding', rect.width, rect.height); } 

 #s{ display: inline-block } 

 <span id="s">A span</span><br/> <button onclick="test()">Test</button> <hr /> <div id="out"></div> 

check the difference when you change the display property to inline-block or block .