使用 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 外,其他屬性是相對於視圖窗口的左上角進行計算,如下圖: