js獲取距離各邊的距離

javascript中offsetWidth、clientWidth、width、scrollWidth、clientX、screenX、offsetX、pageX原文：https://www.cnblogs.com/ifworld/p/7605954.html
offsetWidth       //返回元素的寬度（包括元素寬度、內邊距和邊框，不包括外邊距）

offsetHeight      //返回元素的高度（包括元素高度、內邊距和邊框，不包括外邊距）

clientWidth        //返回元素的寬度（包括元素寬度、內邊距，不包括邊框和外邊距）

clientHeight       //返回元素的高度（包括元素高度、內邊距，不包括邊框和外邊距）

style.width         //返回元素的寬度（包括元素寬度，不包括內邊距、邊框和外邊距）

style.height       //返回元素的高度（包括元素高度，不包括內邊距、邊框和外邊距）

scrollWidth       //返回元素的寬度（包括元素寬度、內邊距和溢出尺寸，不包括邊框和外邊距），無溢出的情況，與clientWidth相同

scrollHeigh       //返回元素的高度（包括元素高度、內邊距和溢出尺寸，不包括邊框和外邊距），無溢出的情況，與clientHeight相同

1. style.width 返回的是字符串，如28px，offsetWidth返回的是數值28；

2. style.width/style.height與scrollWidth/scrollHeight是可讀寫的屬性，clientWidth/clientHeight與offsetWidth/offsetHeight是只讀屬性

3. style.width的值需要事先定義，否則取到的值為空。而且必須要定義在html里(內聯樣式)，如果定義在css里，style.height的值仍然為空，但元素偏移有效；而offsetWidth則仍能取到。

//-----------------------------------------------------------------------------------------------

offsetTop    //返回元素的上外緣距離最近采用定位父元素內壁的距離，如果父元素中沒有采用定位的，則是獲取上外邊緣距離文檔內壁的距離。

             所謂的定位就是position屬性值為relative、absolute或者fixed。返回值是一個整數，單位是像素。此屬性是只讀的。

offsetLeft       //此屬性和offsetTop的原理是一樣的，只不過方位不同，這里就不多介紹了。

scrollLeft        //此屬性可以獲取或者設置對象的最左邊到對象在當前窗口顯示的范圍內的左邊的距離，也就是元素被滾動條向左拉動的距離。

             返回值是一個整數，單位是像素。此屬性是可讀寫的。

scrollTop   //此屬性可以獲取或者設置對象的最頂部到對象在當前窗口顯示的范圍內的頂邊的距離，也就是元素滾動條被向下拉動的距離。

             返回值是一個整數，單位是像素。此屬性是可讀寫的。

//-------------------------------------------------------------------------------------------------

當鼠標事件發生時（不管是onclick，還是omousemove，onmouseover等）

clientX        鼠標相對於瀏覽器（這里說的是瀏覽器的有效區域）左上角x軸的坐標；  不隨滾動條滾動而改變；

clientY        鼠標相對於瀏覽器（這里說的是瀏覽器的有效區域）左上角y軸的坐標；  不隨滾動條滾動而改變；

pageX        鼠標相對於瀏覽器（這里說的是瀏覽器的有效區域）左上角x軸的坐標；  隨滾動條滾動而改變；

pageY        鼠標相對於瀏覽器（這里說的是瀏覽器的有效區域）左上角y軸的坐標；  隨滾動條滾動而改變；

screenX     鼠標相對於顯示器屏幕左上角x軸的坐標；  

screenY      鼠標相對於顯示器屏幕左上角y軸的坐標；  

offsetX        鼠標相對於事件源左上角X軸的坐標

offsetY        鼠標相對於事件源左上角Y軸的坐標