用 js 獲取頁面元素的位置圖文總結

在作一些組件和交互時，經常須要動態獲取鼠標點擊位置、元素寬高和元素位置信息，網上有不少種方法，但本身沒有總結過，不知道各類方法的優缺點和兼容性，在此專門的總結一下。

注意：

1. 這些關於視覺的內容都被定義在了 W3C 的 CSSOM View Module 模塊中，裏面有詳細的接口定義和說明，建議好好研讀。
2. 本文主要參照 W3C 文檔全面瞭解各個屬性的意義，對應接口文檔用圖文的方式直觀顯示各個屬性的含義。但也會有一些本身沒有徹底理解和錯誤之處，請各位批評指正，後續會繼續完善。
3. 本文涉及到圖片較多，爲了得到最佳體驗，建議使用電腦閱讀。

閱讀 W3C 規範的總結

Extensions to the Window Interface

圖片糾錯： scrollX = pageXOffset：表示滾動條在X軸方向上滾動的距離；scrollY = pageYOffset：表示滾動條在Y軸方向上滾動的距離

The Screen Interface

Extensions to the Document Interface

Extensions to the Element Interface

Extensions to the HTMLElement Interface

Extensions to the HTMLImageElement Interface

Extensions to the Range Interface

getBoundingClientRect()返回對象的屬性

Extensions to the MouseEvent Interface

但願對你有幫助，歡迎分享和批評指正~~~~~

參考

• CSSOM View Module
• CSSOM視圖模式(CSSOM View Module)相關整理
• W3C DOM Core
• UIEvent
• 一張圖完全掌握scrollTop, offsetTop, scrollLeft, offsetLeft......
• MDN:HTMLElement.offsetParent
• 深刻理解定位父級offsetParent及偏移大小
• offsetParent算法分析