对getBoundingClientRect感到困惑

Question

对Javascript中的getBoundingClientRect()函数感到困惑。

根据官方文件，如果const rect = getBoundingClientRect();，那么我们

rect.width = rect.right - rect.left;

rect.height = rect.bottom - rect.top;

这是否意味着左、右位置是左、全、右排他性的，即[左，右]？否则它应该是

rect.height = rect.bottom - rect.top + 1;

请看下面的5x5地图。在[inclusive, inclusive]模式下，所有1的边界应该是left=2, right=4, top=3, bottom=4，并且我们有

width=right-left+1=4-2+1
height=bottom-top+1=4-3+1

5x5网格

0 0 0 0 0
0 0 0 0 0
0 0 0 0 0
0 0 1 1 1
0 0 1 1 1

一个更明确的问题：

rect.left是什么意思？这是否意味着客户端容器或i第四像素的左距离？那rect.right呢

Answer 1

以这种方式考虑：

​

​

如果灰色方块表示屏幕空间，则红色方块有边框：

{
  x: 1, y: 1,
  width: 3, height: 3
}

这意味着它有left=1，right=4，因此，right-left=width