神秘布偶猫

Oyiso's xLog

决定性瞬间
github

在 JavaScript 中使用 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

載入中......
此文章數據所有權由區塊鏈加密技術和智能合約保障僅歸創作者所有。