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

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

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

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

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

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

scrollWidth

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

註意：offsetWidth(offsetHeight)與style.width(style.height)的區別

1. style.height 返回的是字符串，如28px，offsetWidth返回的是數值28，如果需要對取得的值進行計算，用offsetWidth比較方便;

如果拿到offsetWidth設置style.left的值，需加‘px‘。

2. style.width/style.height與scrollWidth/scrollHeight是可讀寫的屬性，

clientWidth/clientHeight與offsetWidth/offsetHeight是只讀屬性

3. style.height的值需要事先定義，否則取到的值為空。

而且必須要定義在html裏，如果定義在css裏，style.height的值仍然為空，但元素偏移有效；

而offsetWidth則仍能取到。

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

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

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

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

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

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

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

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

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

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

圖片引用來自lzding的博客

javascript中offsetWidth、clientWidth、width、scrollWidth、clientX、screenX、offsetX、pageX