神秘布偶猫

Oyiso's xLog

决定性瞬间
github

JS中使用getBoundingClientRect()方法获取精确的元素距离

使用 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 外,其他属性是相对于视图窗口的左上角进行计算,如下图:

image

加载中...
此文章数据所有权由区块链加密技术和智能合约保障仅归创作者所有。