所以 jQuery 的 .width()
always returns the clientWidth ,不管它是什么。但如果你想要亚像素精度,you have to opt for getBoundingClientRect .
我的问题是一个跨浏览器的问题。假设我想使用 getBoundingClientRects() 或 getBoundingClientRect()。在今天使用的所有主要浏览器中(即至少 95% 的人使用的浏览器),它们是否返回客户区的宽度,即本质上是 element.clientWidth
而不管框大小?或者,如果元素具有 box-sizing: border-box
,我是否必须减去填充?就此而言,如何获取填充和边距的子像素值?
我正在寻找一个关于当今使用的主要浏览器行为的答案。
最佳答案
来自 MDN:强调我的
The returned value is a
DOMRect
object which is the union of the rectangles returned bygetClientRects()
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
值,但我不知道这种错误实现的浏览器使用情况。
关于javascript - getBoundingClientRect() 如何与框大小交互?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41868753/