JS中的offsetWidth、offsetHeight、clientWidth、clientHeight等等的詳細介紹

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的博客