你記住JS中offsetWidth、clientWidth、width、scrollWidth、clientX、screenX、offsetX、pageX嗎？


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

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

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

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

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

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

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

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

1. style.width 返回的是字符串，如28px，offsetWidth返回的是數(shù)值28；
2. style.width/style.height與scrollWidth/scrollHeight是可讀寫的屬性，clientWidth/clientHeight與offsetWidth/offsetHeight是只讀屬性
3. style.width的值需要事先定義，否則取到的值為空。而且必須要定義在html里(內(nèi)聯(lián)樣式)，如果定義在css里，style.height的值仍然為空，但元素偏移有效；而offsetWidth則仍能取到。

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

offsetTop //返回元素的上外緣距離最近采用定位父元素內(nèi)壁的距離，如果父元素中沒有采用定位的，則是獲取上外邊緣距離文檔內(nèi)壁的距離。
所謂的定位就是position屬性值為relative、absolute或者fixed。返回值是一個整數(shù)，單位是像素。此屬性是只讀的。
offsetLeft //此屬性和offsetTop的原理是一樣的，只不過方位不同，這里就不多介紹了。
scrollLeft //此屬性可以獲取或者設(shè)置對象的最左邊到對象在當(dāng)前窗口顯示的范圍內(nèi)的左邊的距離，也就是元素被滾動條向左拉動的距離。返回值是一個整數(shù)，單位是像素。此屬性是可讀寫的。
scrollTop //此屬性可以獲取或者設(shè)置對象的最頂部到對象在當(dāng)前窗口顯示的范圍內(nèi)的頂邊的距離，也就是元素滾動條被向下拉動的距離。
返回值是一個整數(shù)，單位是像素。此屬性是可讀寫的。

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

當(dāng)鼠標(biāo)事件發(fā)生時（不管是onclick，還是omousemove，onmouseover等）

clientX 鼠標(biāo)相對于瀏覽器（這里說的是瀏覽器的有效區(qū)域）左上角x軸的坐標(biāo)； 不隨滾動條滾動而改變；

clientY 鼠標(biāo)相對于瀏覽器（這里說的是瀏覽器的有效區(qū)域）左上角y軸的坐標(biāo)； 不隨滾動條滾動而改變；

pageX 鼠標(biāo)相對于瀏覽器（這里說的是瀏覽器的有效區(qū)域）左上角x軸的坐標(biāo)； 隨滾動條滾動而改變；

pageY 鼠標(biāo)相對于瀏覽器（這里說的是瀏覽器的有效區(qū)域）左上角y軸的坐標(biāo)； 隨滾動條滾動而改變；

screenX 鼠標(biāo)相對于顯示器屏幕左上角x軸的坐標(biāo)；

screenY 鼠標(biāo)相對于顯示器屏幕左上角y軸的坐標(biāo)；

offsetX 鼠標(biāo)相對于事件源左上角X軸的坐標(biāo)

offsetY 鼠標(biāo)相對于事件源左上角Y軸的坐標(biāo)
//-------------------------------------------------------------------------------------------------
innerheight 返回窗口的文檔顯示區(qū)的高度。（window.innerHeight）
innerwidth 返回窗口的文檔顯示區(qū)的寬度。（window.innerWidth）



作者：Vam的金豆之路

主要領(lǐng)域：前端開發(fā)

我的微信：maomin9761

微信公眾號：前端歷劫之路