2

在检查器的 JS 控制台中，从 Safari 或 Chrome 或您拥有的其他设备中尝试此操作。

var x = document.body.getBoundingClientRect();
> undefined

x.top;
> 0

x.top += 5;
> 5

x.top;
> 0

我原以为由 生成的对象getBoundingClientRect()是可修改的对象。我刚刚证明这是错误的。它也不会与浏览器的状态保持同步，所以如果我稍微滚动页面，然后检查 的值x.top，它仍然会报告，0即使它现在应该是负值，因为我已经向下滚动了。至少，如果我用另一个调用重新分配 x ，getBoundingClientRect()那么它会报告一个负值。

所以，它没有回应我试图改变它，但表现出这种行为似乎没有更高的目的。

也许有某种干净的方式来解释这一点？比*耸肩*更好的东西就是它的作用。

4

2 回答 2

4

根据https://developer.mozilla.org/en-US/docs/Web/API/Element.getBoundingClientRect，

rectObject = object.getBoundingClientRect();

返回值是一个TextRectangle对象，它是getClientRects()为元素返回的矩形的并集，即与元素关联的CSS 边框框。

并根据https://developer.mozilla.org/en-US/docs/XPCOM_Interface_Reference/nsIDOMClientRect，

返回的 TextRectangle 的属性是只读的。

此外，规范（http://www.w3.org/TR/cssom-view/#the-clientrect-interface）说

interface ClientRect {
   readonly attribute float top;
   readonly attribute float right;
   readonly attribute float bottom;
   readonly attribute float left;
   readonly attribute float width;
   readonly attribute float height;
};
于 2013-10-16T00:23:50.967 回答
4

该getBoundingClientRect方法确实返回一个其属性被指定为只读的ClientRect对象。这就是它的工作原理:-) 大多数浏览器会将其作为具有writable: false 描述符的属性来实现（但不要相信这一点，主机对象可能是任意实现的）。

此行为的更高目的是该方法将返回当前值的静态快照，该快照与活动DOM 和对其所做的更改分离。因此，返回的对象被冻结，分配给它没有意义 - 还有其他方法可以更改视图。

于 2013-10-16T00:25:18.333 回答