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

Question

在MDN的Element.clientWidth描述中,它说.

_{注意:我已经根据@potatopeelings答案更新了MDN .}

Element.clientWidth属性是元素的内部宽度(以像素为单位).它包括填充但不包括垂直滚动条(如果存在,如果呈现),边框或边距.

此属性将值舍入为整数.如果需要小数值,请使用element.getBoundingClientRect().

据我所知,除了四舍五入以外,clientWidth应该是相同的getBoundingClientRect().width.

但是我看到了很多的元素(其中display是inline？)的clientWidth(和高度)为零,而通过值返回getBoundingClientRect似乎是正确的.

在stackoverflow上搜索会带来一些答案,说明在文档准备好之前就会发生这种情况状态但我一直看到这一点,而不仅仅是在页面加载时.

这种行为对于我检查过的所有浏览器都是一致的,在哪里指定这应该是行为？

样品:

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

来自规范(http://www.w3.org/TR/cssom-view/#dom-element-clientwidth)

clientWidth属性必须运行以下步骤:

1.如果元素没有关联的CSS布局框,或者CSS布局框是内联的,则返回零.
...

Answer 2

除了@ potatopeelings的回答:

内联元素没有内在或指定的维度.例如,您无法为a定义宽度span(除非您更改它的display属性).

此外,clientWidth并getBoundingClientRect用于不同的目的,可能会返回不同的值.后者还会考虑变换并返回实际渲染时元素的尺寸.

.class {
  transform: scale(0.5);
}

如果clientWidth在这种情况下返回1000,则宽度getBoundingClientRect将为500.

您可以将clientWidth"我在元素中可用的空间" getBoundingClientRect视为"元素在屏幕上占用的空间".所以在我们的例子中,元素将有足够的空间并排包含两个500px元素,它将在屏幕上占据500px.