js中有很多“距離”，為了不會混淆這里總結(jié)一下其中部分距離
本文包括元素屬性相關(guān)的距離和鼠標事件中的距離厕九，廢話不多說革屠，進入正文
先補充一下镊讼，本文的測試環(huán)境如下：
Chrome Dev 54.0.2840.71
Firefox 49.0
Opera 41.0
Safari 10.1
IE 11题翻。前四者運行在macOS Sierra 10.12上揩徊，IE11運行在搭載windows10 1607的虛擬機上
元素屬性中的各種“距離”
元素屬性中的距離有以下6對：
scrollLeft: 設(shè)置或獲取位于對象左邊界和窗口中可見內(nèi)容的最左端之間的距離
scrollTop: 設(shè)置或獲取位于對象最頂端和窗口中可見內(nèi)容的最頂端之間的距離
offsetHeight: 獲得對象的可視區(qū)域的高度，包括邊框
offsetWidth: 獲得對象的可視區(qū)域的寬度嵌赠，包括邊框
clientHeight: 獲得對象邊框內(nèi)部分的高度
clientWidth: 獲得對象邊框內(nèi)部分的寬度
offsetLeft: 獲取對象相對于版面或由offsetParent屬性指定的父坐標的計算左側(cè)位置
offsetTop: 獲取對象相對于版面或由offsetTop屬性指定的父坐標的計算頂端位置
clientTop: 獲取對象頂部邊框?qū)挾?br> clientLeft: 獲取對象左側(cè)邊框?qū)挾?/p>
scrollWidth: 獲取對象的滾動寬度
scrollHeight: 獲取對象的滾動高度靴拱。
上面提到了offsetParent屬性，其實當前div相對誰定位猾普，這個屬性就是誰。根據(jù)position值不同本谜，有以下2種情況
當父輩元素都沒有relative屬性時初家，無論當前元素的position是absolute，relative，fixed或fixed溜在，offsetParent都是body元素
父輩元素有relative屬性時陌知，無論當前元素的position是absolute，relative掖肋，fixed或fixed仆葡，offsetParent是具有relative屬性的最近父元素
分不清楚？ 看下圖
這個里面可以清晰的看到上方的前4對志笼，和他們之間的關(guān)系沿盅。
關(guān)于jQuery的元素距離屬性，文章最后整理了他們和DOM屬性之間的關(guān)系纫溃。
第一個值得強調(diào)的是腰涧，上面的這個例子中的div的box-sizing屬性是默認的content-box, 它的offsetHeight，clientHeight紊浩，clientWidth和offsetWidth有如下關(guān)系：
clientHeight = height + paddingTopWidth + paddingBottomWidth;
clientWidth = width + paddingLeftWidth + paddingRightWidth;
offsetHeight = clientHeight + borderTopWidth + borderBottomWidth;
offsetWidth = clientWidth + borderLeftWidth + borderRightWidth;
如果box-sizing屬性是border-box,那么窖铡，它們的關(guān)系將如下（ie6 ie7默認是這樣的）:
offsetHeight = height;
offsetWidth = width;
clientHeight = height - borderTopWidth - borderBottomWidth;
clientWidth = width - borderLeftWidth - borderRightWidth;
第二個值得強調(diào)的是，這個例子中坊谁，由于它的父元素沒有設(shè)置position:relative费彼，所以圖中這個div利用position:absolute;相對文檔定位，如果給他添加一個具有position:relative屬性的父div口芍，那么offsetLeft和offsetTop就是下圖這樣：
不過無論它怎么的定位箍铲，哪怕是position:relative或fixed，它的計算關(guān)系也不會發(fā)生變化阶界，依然是：
offsetLeft = left + marginLeft;
offsetTop = top + marginTop;
講了這么多虹钮，那么scrollWidth和scrollHeight呢？scrollWidth和scrollHeight在不同瀏覽器里面并不一致膘融，如下圖（從左到右依次是Chrome, Firefox, Opera, Safari, IE11）
其實仔細研究這個里面的不同芙粱，會發(fā)現(xiàn)在不同的瀏覽器div的offsetLeft、offsetTop這兩個值的屬性并不完全相同氧映。當div里面的內(nèi)容溢出時春畔，只有IE保留了padding的全部值，chrome岛都、opera和safari會忽略padding-right的值視其為0律姨，firefox會同時忽略padding-right和padding-bottom，如下圖
在各個瀏覽器中臼疫，對于滾動條本身的渲染也不一樣择份。它們會在計算scrollWidth和scrollHeight時排除各自的滾動條寬度。除了上述的不同烫堤，實際發(fā)現(xiàn)每個瀏覽器中scrollLeft和scrollTop的最大值也不一樣荣赶，甚至差距極大凤价，由于scrollLeft和scrollTop隨滾動事件發(fā)生而輸出，博主就上述例子的最大值記錄如下：
| maximum value | chrome | Firefox | opera | safari | IE11 |
|---|---|---|---|---|---|
| scrollLeft | 330 | 160 | 827 | 330 | 217 |
| scrollTop | 230 | 210 | 485 | 230 | 330 |
實際上就是由于這些元素屬性在不同瀏覽器中的差異導(dǎo)致scrollWidth和scrollHeight的不同拔创，具體使用應(yīng)格外注意利诺。不過博主看過一些資料表示這兩個屬性和offsetParent有關(guān)，通過實際編程發(fā)現(xiàn)它們和offsetParent無關(guān)剩燥，這里不展開描述了慢逾，因為低版本瀏覽器，尤其ie7 ie6的實現(xiàn)方式可能會比較奇葩灭红。
鼠標事件中的各種“距離”
鼠標事件很多侣滩，不過每個事件中關(guān)于距離的屬性含義是一樣的，這里用mousemove來講解比伏，具體的內(nèi)容會在不久之后寫到了js事件部分講解胜卤。
鼠標實現(xiàn)對于現(xiàn)在的瀏覽器來說，實現(xiàn)都是一樣的了赁项，下面例子都在Chorme中實現(xiàn)葛躏。
鼠標事件有以下6對：
event.clientX：相對瀏覽器左上角的水平坐標
event.clientY：相對瀏覽器左上角的垂直坐標
event.offsetX：相對于事件源(event.target||event.srcElement)左上角水平偏移
event.offsetY：相對于事件源(event.target||event.srcElement)左上角垂直偏移
event.pageX：相對于document左上角的水平坐標
event.pageY：相對于document左上角的垂直坐標
event.layerX：相對于offsetParent左上角的水平偏移
event.layerY：相對于offsetParent左上角的水平偏移
event.movementX：相對于前一次事件中screenX的偏移
event.movementY：相對于前一次事件中screenY的偏移
event.screenX：相對于屏幕左上角的水平坐標
event.screenY：相對于屏幕左上角的垂直坐標
x：和pageX一樣，用于兼容IE8及以前瀏覽器
y：和pageY一樣悠菜，用于兼容IE8及以前瀏覽器
總之舰攒，還是先看圖
<small>*這個圖中，黑色實線邊框表示瀏覽器可視區(qū)域部分悔醋，外層藍色虛線框表示整個DOM部分,整個圖為電腦屏幕</small>
圖里面怎么沒有movementX和movementY?因為這個事件的值和上一個事件有關(guān)摩窃，關(guān)系如下：
currentEvent.movementX = currentEvent.screenX - previousEvent.screenX
currentEvent.movementY = currentEvent.screenY - previousEvent.screenY
值得注意的時offsetX和offsetY，他表示鼠標到事件源padding左上角的的偏移芬骄，這里mousemove事件注冊在window上猾愿，所以位置如圖所示。
當瀏覽器的水平滾動條滑動以后账阻，pageX和clientX就不同了蒂秘。同理，當瀏覽器的垂直滾動條滑動以后淘太，pageY和clientY就不同了,但它們始終存在以下關(guān)系：
event.pageX = event.clientX + body.scrollLeft;
event.pageY = event.clientY + body.scrollTop;
鼠標事件中的距離比元素中的簡單一些姻僧，具體的使用放在之后寫的事件部分。
jQuery中元素距離屬性
var $div = $("#div");
$div.width(); //元素寬度蒲牧，不包括padding和border
$div.height(); //元素高度撇贺，不包括padding和border$div.innerWidth(); //元素內(nèi)寬度，包括padding冰抢，不包括border
$div.innerHeight(); //元素內(nèi)高度松嘶，包括padding，不包括border$div.outerWidth(); //元素可見寬度挎扰，包括padding和border
$div.outerHeight(); //元素可見高度翠订，包括padding和border$div.outerWidth(true); //元素全部寬度缓升，包括padding、border和margin
$div.outerHeight(true); //元素全部高度蕴轨，包括padding、border和margin
