使用 node.offsetWidth
方法可以获取到元素的宽度,类似的方法如下:
- offsetHeight
- offsetTop
- offsetBottm
- offsetLeft
- offsetRight
问题诞生#
我们通过 offset 方法获取的数值会以四舍五入方式取整,然而在我们开发的时候,有些地方需要精准的数值,这时候,用 offset 方法就不太可行。
解决办法#
通过 getBoundingClientRect()
方法就能获取到元素的精确数值 (精确到小数点后 6 位) 。
用法#
如 node.getBoundingClientRect().width
就可以获取到元素的宽度,类似的方法如下:
- getBoundingClientRect().height
- getBoundingClientRect().top
- getBoundingClientRect().bottom
- getBoundingClientRect().left
- getBoundingClientRect().right
详解#
getBoundingClientRect()
返回的是矩形的集合。表示当前元素在浏览器中的位置以及占用的空间大小,除 width 和 height 外,其他属性是相对于视图窗口的左上角进行计算,如下图: