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

linghuam發表於2019-03-01

在做一些元件和互動時,常常需要動態獲取滑鼠點選位置、元素寬高和元素位置資訊,網上有很多種方法,但自己沒有總結過,不知道各種方法的優缺點和相容性,在此專門的總結一下。

注意:

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

閱讀 W3C 規範的總結

Extensions to the Window Interface

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

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

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

The Screen Interface

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

Extensions to the Document Interface

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

Extensions to the Element Interface

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

Extensions to the HTMLElement Interface

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

Extensions to the HTMLImageElement Interface

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

Extensions to the Range Interface

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

getBoundingClientRect()返回物件的屬性

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

Extensions to the MouseEvent Interface

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

希望對你有幫助,歡迎分享和批評指正~~~~~

參考

相關文章