DOM元素位置，滾動位置和鼠標事件位置相關屬性函數總結

前言：前段時間常常被這些參數搞混，在此總結一下，畫了一張圖，但願能對你們有所幫助

getBoundingClientRect相關

• left 元素的左邊 距離 可視窗口左邊的距離
• right 元素的右邊 距離 可視窗口左邊的距離
• top 元素的上邊 距離 可視窗口頂部的距離
• bottom 元素的下邊 距離 可視窗口頂部的距離
• width 元素的寬
• height 元素的高
• x/y 目前來看與let/top相同

鼠標相關事件位置屬性

• screenX/screenY 鼠標點擊位置距離屏幕左上角的位置
• clientX/clentY 鼠標點擊位置距離可視窗口左上角的位置
• pageX/pageY 鼠標點擊位置距離文檔左上角的位置
• offsetX/offsetY 鼠標點擊位置距離當前元素的邊框內的位置
• layerX/layerY 鼠標點擊位置 距離 當前元素的距離最近的非static的元素的位置

注：此圖來自網上

滾動相關

• scrollTop 元素垂直方向被捲去的像素的距離
• scrollLeft 元素水平方向被捲去的像素的距離
• window.scrollX(window.pageXOffset) 文檔/頁面水平方向滾動的像素值
• window.scrollY(window.pageYOffset) 文檔/頁面垂直方向滾動的像素值
• scrollTo(xpos, ypos) 將內容滾動到指定的座標
• scrollBy(xnum, ynum) 將內容向右下滾動的像素數

元素大小相關

• offsetWidth=border+padding+width
• offsetHeight=border+padding+height
• clientWidth=padding+width-滾動條寬度
• clientHeight=padding+height-滾動條寬度
• scrollWidth=padding+包含內容的徹底寬度
• scrollHeight=padding+包含內容的徹底高度

示例圖