javascript中offsetWidth、clientWidth、width、scrollWidth、clientX、screenX、offsetX、pageX 原文：https://www.cnblogs.com/ifworld/p/7605954.html offsetWidth //返回元 ...
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軸的坐標
圖片引用來自lzding的博客
