一、寫在前面
在閱讀本文前，希望大家能針對每個屬性親手測試，網上現有的大量相關博客都有不等的概念錯誤，畢竟親手實踐才能更好的掌握這些概念。
1.pageX，clientX，screenX與offsetX
先統一了解下這四個概念，理解不透沒關系，咱們把概念相近的對比着一一細說。
pageX：鼠標指針距離文檔左側邊緣的距離，不隨滾動條變化而變化。
clientX：鼠標指針距離可視窗口左側邊緣的距離，隨滾動條變化而變化，如果拖動滾動條讓元素距離可視窗口左側越近，值越小。
screenX：鼠標指針距離屏幕的距離(包括瀏覽器工具欄之類)，不隨滾動條變化而變化
offsetX：鼠標指針距離當前綁定元素左側距離
我們先來看看pageX與clientX無滾動條的對比效果
<div class="one"></div>
var Div = document.querySelector('.one'); Div.onmousemove = (e) => { var X1 = e.pageX; var Y1 = e.pageY; var X2 = e.clientX; var Y2 = e.clientY; Div.innerHTML = `pageX:${X1},pageY:${Y1},clientX:${X2},clientY:${Y2}` }
由圖可見，在無滾動條的情況下，pageX與clientX，pageY與clientY是完全相同的。
試着給div增加一個margin-left:1600px;讓頁面出現滾動條,我們將可視窗口滾動到最右側，再來對比pageX與clientX
可以看到，在頁面X軸出現滾動條后，pageX始終要比clientX要大，那是因為clientX無論滾動條滾動多少，它始終只計算鼠標到可視窗口左側的距離，而pageX則還要加上滾動的距離
pageX = 鼠標到可視窗口左側距離+滾動條滾動距離(如果有滾動條)
clientX = 鼠標到可視窗口左側距離
如果沒有滾動條，這兩者的距離是完全相同的。
我們再結合前者，加上screenY與offsetY的對比，請看圖
為了方便對比，這里我們拿Y軸做對比。
offsetY是相對綁定事件的元素，這里是相對div，所以相比另外三個，Y軸的數值永遠是最小的。
pageY和clientY在無滾動條的情況下是完全相同的，相對文檔和可視窗口區域。這里因為沒有滾動條，所以是完全相同的。
screen是相對屏幕，包含了瀏覽器任務欄，書簽欄的高度，所以它永遠是最高的。
關於這四個的兼容問題，由於瀏覽的不斷更新，比如offsetX很多博客都說是IE獨有的，結果上圖我全是在谷歌測試的，也是支持的，所以這樣的說法過於絕對，是不完全正確的。
2. offsetLeft與style.left
下面概念中的position值為非static時，可以理解為position為relative,absolute,fixed其一
2.1 offsetLeft：
元素相對其定位父級(offsetParent)的左偏移量。
簡單去理解，就是距離元素最近且position值非static父級元素的左偏移量，如果向上一直未找到，則相對body。
假設此時一個父級div包含一個子級div，均未定位，父級margin-left為20px,子級margin-left為30px，且父級border為2px
我們上面說了，從子級開始往上找定位父級，但是未找到，那么此時就相對body
那么子級的offsetLeft = 父級左偏移量20px+子級30px+父級邊框2px
我們嘗試給父級div添加一個position：absolute屬性，其余屬性全部不做改變，此時子級的定位父級就是自己的上級div，因此offsetLeft為30px
2.2 style.left：
獲取元素相對其定位父級的左偏移，且元素本身position值為非static。
簡單去理解，style.left只有元素自身進行定位才會有效，否則是無法取到的。
2.3 為什么style.left取不到？
首先元素本身要進行定位，其次，其left屬性為內部樣式時才能獲取。
<div style='left=20px'></div>
2.4 offsetLeft與style.left的區別
1.獲取offsetLeft屬性的元素自身不用定位，但獲取style.left的元素必須定位
2.offsetLeft是只讀的，style.left是讀寫的
3.offsetLeft返回的是數字，不帶單位，style.left 返回的是字符串，帶單位
4.style.left 只能獲取定義在html中的內部樣式屬性，而offsetLeft並沒有這個限制
2.5 同時存在margin-left與left時的offsetLeft
<div class="parent"><div class="child" style='left:20px'></div></div>
需要注意的是，當margin與left，外邊距與定位偏移量同時存在時，它們是累加的，並不會發生重疊。
3. offsetHeight,clientHeight與scrollHeight
我們先來看看這三者的含義
offsetHeight：獲取元素的寬度，包含border，padding，不包含margin。
clientHeight:獲取元素內容區域的寬度，包括padding與元素的width，不包含border與margin，一般用於獲取視窗高度，不包括溢出不可見部分的高度。
scrollHeight：只讀屬性是一個元素內容高度的度量，包括由於溢出導致的視圖中不可見內容，包含padding和width，不包含border與margin
4.clientTop，scrolleTop
scrolleTop:獲取元素滾動后的距離文檔頂部的距離，也就是滾動條滾動的距離。
有個公式：element.scrollHeight - element.scrollTop === element.clientHeight用於判斷滾動條是否滾動到底。