關於offset

offsetParent（只讀）

HTMLElement.offsetParent 是一個只讀屬性，返回一個指向最近的（closest，指包含層級上的最近）包含該元素的定位元素。如果沒有定位的元素，則 offsetParent 為最近的 table, table cell 或根元素（標準模式下為 html；quirks 模式下為 body）。當元素的 style.display 設置為 "none" 時，offsetParent 返回 null。offsetParent 很有用，因為 offsetTop 和 offsetLeft 都是相對於其內邊距邊界的。

兼容性：

在 Webkit 中，如果元素為隱藏的（該元素或其祖先元素的 style.display 為 "none"），或者該元素的 style.position 被設為 "fixed"，則該屬性返回 null。

在 IE 9 中，如果該元素的 style.position 被設置為 "fixed"，則該屬性返回 null。（display:none 無影響。）

塊級元素&行內元素

對塊級元素來說，offsetTop、offsetLeft、offsetWidth 及 offsetHeight 描述了元素相對於 offsetParent 的邊界框。

然而，對於可被截斷到下一行的行內元素（如 span），offsetTop 和 offsetLeft 描述的是第一個邊界框的位置（使用 Element.getClientRects() 來獲取其寬度和高度），而 offsetWidth 和 offsetHeight 描述的是邊界框的維度（使用 Element.getBoundingClientRect 來獲取其位置）。因此，使用 offsetLeft、offsetTop、offsetWidth、offsetHeight 來對應 left、top、width 和 height 的一個盒子將不會是文本容器 span 的盒子邊界。

offsetTop（只讀）

HTMLElement.offsetTop 為只讀屬性，它返回當前元素相對於其 offsetParent 元素的頂部的距離。

offsetLeft（只讀）

HTMLElement.offsetLeft 是一個只讀屬性，返回當前元素左上角相對於 HTMLElement.offsetParent 節點的左邊界偏移的像素值。

offsetHeight（只讀）

HTMLElement.offsetHeight 是一個只讀屬性，它返回該元素的像素高度，高度包含該元素的垂直內邊距和邊框，且是一個整數。

通常，元素的offsetHeight是一種元素CSS高度的衡量標準，包括元素的邊框、內邊距和元素的水平滾動條（如果存在且渲染的話），不包含:before或:after等偽類元素的高度。

對於文檔的body對象，它包括代替元素的CSS高度線性總含量高。浮動元素的向下延伸內容高度是被忽略的。

offsetWidth（只讀）

是？

HTMLElement.offsetWidth 是一個只讀屬性，返回一個元素的佈局寬度。一個典型的（譯者注：各瀏覽器的offsetWidth可能有所不同）offsetWidth是測量包含元素的邊框(border)、水平線上的內邊距(padding)、豎直方向滾動條(scrollbar)（如果存在的話）、以及CSS設置的寬度(width)的值。

滾動尺寸scroll

可以設置這些值來控制滾動

scrollWidth（只讀）

元素的scrollWidth只讀屬性以px為單位返回元素的內容區域寬度或元素的本身的寬度中更大的那個值。若元素的寬度大於其內容的區域（例如，元素存在滾動條時）, scrollWidth的值要大於clientWidth

scrollHeight（只讀）

Element.scrollHeight 是計量元素內容高度的只讀屬性，包括overflow樣式屬性導致的視圖中不可見內容。沒有垂直滾動條的情況下，scrollHeight值與元素視圖填充所有內容所需要的最小值clientHeight相同。包括元素的padding，但不包括元素的margin.

scrollLeft（可寫）

Element.scrollLeft 屬性可以讀取或設置元素滾動條到元素左邊的距離。

注意如果這個元素的內容排列方向（direction） 是rtl (right-to-left) ，那麼滾動條會位於最右側（內容開始處），並且scrollLeft值為0。此時，當你從右到左拖動滾動條時，scrollLeft會從0變為負數（這個特性在chrome瀏覽器中不存在）。

scrollTop（可寫）

這個Element.scrollTop 屬性可以設置或者獲取一個元素被捲起的像素距離。一個元素的 scrollTop 是可以去計算出這個元素最高高度距離它容器頂部的可見高度。當一個元素的容器沒有產生垂直方向的滾動條,那它的 scrollTop 的值默認為0.

注意：

獲取頁面向上滾動的距離，有瀏覽器兼容性問題，獲取方法：

document.documentElement.scrollTop||document.body.scrollTop

關於client

clientWidth（只讀）

Element.clientWidth 屬性表示元素的內部寬度，以像素計。該屬性包括內邊距，但不包括垂直滾動條（如果有）、邊框和外邊距。

clentHeight（只讀）

返回元素內部的高度(單位像素)，包含內邊距，但不包括水平滾動條、邊框和外邊距。

clientHeight 可以通過 CSS height + CSS padding - 水平滾動條高度 (如果存在)來計算.

獲取頁面高度：document.documentElement.clientHeight

clientLeft（只讀）

表示一個元素的左邊框的寬度，以像素表示。如果元素的文本方向是從右向左（RTL, right-to-left），並且由於內容溢出導致左邊出現了一個垂直滾動條，則該屬性包括滾動條的寬度。clientLeft 不包括左外邊距和左內邊距。clientLeft 是隻讀的。

clientTop（只讀）

一個元素頂部邊框的寬度（以像素表示）。不包括頂部外邊距或內邊距。clientTop 是隻讀的。

關於clientRect

getBoundingClientRect

Element.getBoundingClientRect()方法返回元素的大小及其相對於視口的位置。

返回值是一個 DOMRect 對象，這個對象是由該元素的 getClientRects() 方法返回的一組矩形的集合, 即：是與該元素相關的CSS 邊框集合 。

DOMRect 對象包含了一組用於描述邊框的只讀屬性——left、top、right和bottom，單位為像素。除了 width 和 height 外的屬性都是相對於視口的左上角位置而言的

當計算邊界矩形時，會考慮視口區域（或其他可滾動元素）內的滾動操作，也就是說，當滾動位置發生了改變，top和left屬性值就會隨之立即發生變化（因此，它們的值是相對於視口的，而不是絕對的）。

兼容性：

意外的好啊有木有？！

視口：瀏覽器可見區域

pc端：視口可以調整

移動端：視口是固定的

文章摘自博客園

中公優就業 幫你成就職業夢：

IT教育專業培訓：https://www.ujiuye.com/

IT職業在線教育：https://xue.ujiuye.com/

大數據時代下做java開發工程師：https://www.ujiuye.com/zt/java/?wt.bd=lsh11tt