offsetLeft、offsetWidth、clientWidth、scrollWidth、style.width···你都分清了嗎？

仍是先來點前戲，哦不，前言吧，主要想說一下爲何我會想把這些東西拿出來作一個區分，這還要從二十多年前的夏天提及······扯遠了扯遠了，主要仍是前不久經歷了一次面試。哪裏的面試我就不說了，他們的面試仍是頗有含量的，其中就問到了這些東西。怎麼說呢，這要是平時敲代碼這些東西我這種馬大哈都是控制檯打印試一下就知道是啥了，可是人家面試的時候問你這些區別時你有時間去控制檯打印嗎？固然是沒有的。唉，經歷了這個事才發現，本身雖然平時作項目瞭解了不少東西，可是都沒有概括整理成體系，沒有把基礎打好。這些都是很簡單的東西，可是日常咱們用起來的時候要養成對比記憶的習慣，這不，人家問到了吧。因此，我要在哪裏跌倒就在哪裏歇會兒，呸呸呸，是在哪裏跌倒就在哪裏爬起來！！！決定把此次的分享安排上，必定要安排的明明白白。

哎呀，一不當心又話癆了，我們閒話少敘，這就開始吧（如下內容有參考一些資料，若是雷同請你們高擡貴手哈）~~~

1.offsetLeft和offsetTop

網上查到的一些花裏胡哨的說法真的是看得我蒙圈，這裏咱們來講的通俗一些。

這兩個都是只讀屬性。offsetLeft從字面意思上理解，就是以父元素做爲參照點（父元素的定位不能是static），當前元素相對於父元素左邊的偏移量。那麼offsetTop就是以父元素爲參照物，當前元素相對於父元素上邊的偏移量。若是沒有父元素那麼參照點就是body。

這裏要注意一點，若是當前定位元素自己是固定定位(position:fixed;)，那麼就別費心找爹了，返回的是當前元素與可視窗口的距離。

offsetLeft/offsetTop和style.left/style.top的區別

style.left/style.top和offsetLeft/offsetTop的功能同樣，那麼它們有什麼區別呢？

1.返回值不同：style.left/style.top返回的是字符串，帶了單位（px）的，而offsetLeft/offsetTop只返回數字（小數會四捨五入）。

2.可讀寫性不一樣：offsetLeft/offsetTop只讀，而style.left/style.top 可讀寫。

3.如果沒有給 HTML 元素指定過 top 樣式，則 style.top 返回的是空字符串（並且必需要定義在html裏，若是定義在css裏，style.left的值仍然爲空，這也是個坑啊，你們謹慎）。

2.offsetWidth和offsetHeight

這兩個也是只讀屬性，先上公式：offsetHeight || offsetWidth = boder + padding + content（不包括margin）

相信你們看了圖和公式都很明白了，這裏就再也不贅述了。

offsetHeight/offsetWidth和style.height/style.width的區別

1.返回值不同：offsetHeight/offsetWidth返回純數字（小數會四捨五入），style.height/style.width返回字符串，帶單位（px）。

2.可讀寫性不同：offsetHeight/offsetWidth只讀，style.height/style.width可讀寫。

3.style.height/style.width是不包含邊框的哦。仍是用和公式表示一下：offsetWidth = style.width + style.padding + style.border

4.若是沒有爲元素設置高度，offsetHeight會根據內容獲取高度值，style.height會返回undefind

5.style.width僅僅能返回在HTML中定義的內部樣式表的width屬性值，若是定義在CSS中就獲取不到。

3.clientWidth和clientHeight

只讀屬性，返回當前節點的可視寬度和可視高度（不包括邊框、外邊距）（包括內邊距）clientHeight = topPadding + bottomPadding+ height - scrollbar.height。

4.scrollTop、scrollLeft、scrollWidth、scrollHeight

scrollTop和scrollLeft是可讀寫屬性 。scrollTop：返回網頁滾動條垂直方向滾去的距離； scrollLeft：返回網頁滾動條水平方向滾去的距離；

scrollWidth和scrolltHeight是只讀屬性，返回當前節點的實際寬度和實際高度（不包括邊框）,沒有滾動條時和clientWidth和clientHeight同樣

5.event.clientX、event.clientY、event.pageX、event.pageY

event.clientX /event.clientY是目標點距離瀏覽器可視範圍的X軸/Y軸座標

event.pageX /event.pageY 是目標點距離document最左上角的X軸/Y軸座標

6.innerHeight/innerWidth和outerHeight/outerWidth

innerHeight/innerWidth爲只讀屬性，返回窗口文檔顯示區的高度和寬度，不包括菜單欄、工具欄和滾動條的寬高。（ 注：IE不支持這些屬性，它用document.documentElement 或document.body 的 clientWidth和 clientHeight屬性做爲替代。）

outerHeight/outerWidth爲可讀寫屬性，設置或返回一個窗口的高度和寬度，包括全部界面元素（如工具欄/滾動條）。

總結

但願這些內容能給你們帶來幫助，廢話就很少說了，加油喲~~~