javascript - getBoundingClientRect() 如何与框大小交互？

Question

所以 jQuery 的 .width() always returns the clientWidth ，不管它是什么。但如果你想要亚像素精度，you have to opt for getBoundingClientRect .

我的问题是一个跨浏览器的问题。假设我想使用 getBoundingClientRects() 或 getBoundingClientRect()。在今天使用的所有主要浏览器中(即至少 95% 的人使用的浏览器)，它们是否返回客户区的宽度，即本质上是 element.clientWidth 而不管框大小？或者，如果元素具有 box-sizing: border-box ，我是否必须减去填充？就此而言，如何获取填充和边距的子像素值？

我正在寻找一个关于当今使用的主要浏览器行为的答案。

Answer 1

来自 MDN:_强调我的

The returned value is a DOMRect object which is the union of the rectangles returned by getClientRects() for the element, i.e., the CSS border-boxes associated with the element.

因此此方法确实返回边框，因此不应受到 box-sizing 属性的任何影响。

所以返回的 DOMRect 的 width 和 height 值将与 offsetWidth 返回的值相同和 offsetHeight属性，除了这些后来是四舍五入的。

---

我只能说这是规范要求 UA 实现的。我不知道不同的实现有何不同。 IIRC，一些 getBoundingClientRect 的早期实现也确实围绕 width 和 height 值，但我不知道这种错误实现的浏览器使用情况。