HTMLElement.offset

HTMLElement.offsetParent

簡介

HTMLElement.offsetParent 是一個**只讀**屬性，offsetParent 很有用，因為 offsetTop 和 offsetLeft 都是相對於其內邊距邊界的。

獲取一個元素的offsetParent按一下順序獲取：

1. 元素或其祖先元素的display屬性被設定為none時，除了IE返回body，其他的瀏覽器(包括Edge)都返回null
2. 元素的position屬性被設定為fixed時，除了firefox返回body，其他的瀏覽器都返回null
3. table cell元素的offsetParent返回最近的table元素
4. 元素的祖先元素中如果有定位元素(position的值不為static)，offsetParent返回最近的定位祖先元素
5. 元素的祖先元素中沒有定位元素，offsetParent返回body

語法

var parentObj = element.offsetParent;

Note: parentObj 是一個物件引用，當前元素相對於該物件偏移（offset）。

瀏覽器相容性

參考：

1. https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetParent

HTMLElement.offsetLeft&HTMLElement.offsetTop

簡介

HTMLElement.offsetLeft 是一個**只讀**屬性，返回當前元素左上角

相對於 HTMLElement.offsetParent 節點的左邊界偏移的畫素值。

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

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

語法

var top = element.offsetTop; //返回一個整數，表示向左偏移的畫素值。
var left = element.offsetLeft;//返回一個整數，表示向上偏移的畫素值。

示例

//這個例子展示了藍色邊框的 div 包含一個長的句子，紅色的盒子是一個可以表示包含這個長句子的span標籤的邊界。
<div style="width: 300px; border:blue solid 1px;">
  <span>Short span. </span>
  <span id="long">Long span that wraps withing this div.</span>
</div>

<div id="box" style="position: absolute; border:red solid 1px;z-index: 10">
</div>

<script>
  var box = document.getElementById("box");
  var long = document.getElementById("long"); 
  // 
  // long.offsetLeft這個值就是span的offsetLeft.
  // span是個行內元素，它沒有absolute定位，但還是預設offsetParent就是父元素，而不是根
  //

  box.style.left = long.offsetLeft + document.body.scrollLeft + "px";
  box.style.top = long.offsetTop + document.body.scrollTop + "px";
  box.style.width = long.offsetWidth + "px";
  box.style.height = long.offsetHeight + "px";
</script> 

應用場景

• XXX

瀏覽器相容性

參考：

1. https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLElement/offsetTop
2. https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLElement/offsetLeft

HTMLElement.offsetWidth&HTMLElement.offsetHeight

簡介

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

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

• offsetWidth = border + padding + content + 垂直滾動條（如果存在且渲染的話）;

• offsetHeight = border + padding + content + 水平滾動條（如果存在且渲染的話）;

• offsetWidth不包含:before或:after等偽類元素的寬度。

• offsetHeight 不包含:before或:after等偽類元素的高度。

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

• box-sizing:border-box時，offsetWidth、offsetHeight不包括border和padding

語法

var offsetWidth =element.offsetWidth;
var offsetHeight =element.offsetHeight;

PS: offsetWidth/offsetHeight屬性將會 round(四捨五入)為一個整數。如果你想要一個fractional(小數)值,請使用element.getBoundingClientRect().

示例

PS: offsetWidth 是一個DHTML物件模型中的屬性，由微軟IE瀏覽器首次引入。有時候它也可以稱為一個元素的物理或圖形尺寸，或者（即CSS3中的border-box模型）的寬度。

應用場景

• XXX

瀏覽器相容性

參考：

1. https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLElement/offsetWidth
2. https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLElement/offsetHeight

Element.clientWidth&Element.clientHeight

簡介

Element.clientWidth是隻讀屬性，對於沒有定義CSS或者內聯佈局盒子的元素為0；否則，它是元素的內部的寬度（以畫素為單位）。它包括內邊距，但不包括垂直滾動條（如果存在，如果呈現），邊框和外邊距。

Element.clientHeight 是隻讀屬性，對於沒有定義CSS或者內聯佈局盒子的元素為0；否則，它是元素內部的高度（以畫素為單位）。它包含內邊距，但不包括水平滾動條、邊框和外邊距。

• clientWidth = padding + width - 垂直滾動條（如果存在且渲染的話）;
• clientHeight = padding + height- 水平滾動條（如果存在且渲染的話）;
• box-sizing:border-box時，clientWidth = width - border - 垂直滾動條（如果存在且渲染的話）;
• box-sizing:border-box時，clientHeight = height- border - 垂直滾動條（如果存在且渲染的話）;

Note: 此時(寫這個文件的時候)瀏覽器的滾動條寬度為13px

語法

var intElemClientWidth = element.clientWidth;
var intElemClientHeight = element.clientHeight;

注意: clientWidth/clientHeight屬性將值舍入為整數。如果您需要小數值，請使用element.getBoundingClientRect()。

示例

應用場景

• XXX

瀏覽器相容性

• clientWidth、clientHeight 最初是在MS IE DHTML物件模型中引入的。

參考：

1. https://developer.mozilla.org/en-US/docs/Web/API/Element/clientWidth
2. https://developer.mozilla.org/en-US/docs/Web/API/Element/clientHeight

HTMLElement.scrollWidth& HTMLElement.scrollHeight

簡介

Element.scrollWidth是一個只讀屬性，是元素內容寬度的度量，包括由於溢位而在螢幕上不可見的內容。

Element.scrollHeight是一個只讀屬性，是元素內容高度的度量，包括由於溢位而在螢幕上不可見的內容。

• scrollWidth值等於元素在不使用水平滾動條的情況下適合視口中的所有內容所需的最小寬度。 寬度的測量方法與clientWidth相同：它包括元素的填充，但不包括邊框，邊距或垂直滾動條（如果存在）。 它還可以包括偽元素的寬度，例如:: before或:: after。
• 如果元素的內容可以適合而不需要水平滾動條，則其scrollWidth等於clientWidth
• scrollHeight值等於元素在不使用垂直滾動條的情況下適合視口中的所有內容所需的最小高度。 高度的測量方法與clientHeight相同：它包括元素的填充，但不包括邊框，邊距或水平滾動條（如果存在）。 它還可以包括偽元素的高度，例如:: before或:: after。
• 如果元素的內容可以適合而不需要垂直滾動條，則其scrollHeight等於clientHeight
• 在firefox和edge以及IE中當padding存在時，scrollWidth只包括padding-left，scrollHeight只包括padding-top，其他瀏覽器不會忽略存在的padding
• box-sizing:border-box時，如果不存在垂直滾動條，scrollWidth需要減去border-left和border-right;
• box-sizing:border-box時，如果不存在水平滾動條，scrollWidth需要減去border-top和border-bottom;

語法

var xScrollWidth = element.scrollWidth;
var intElemScrollHeight = element.scrollHeight;

注意：scrollWidth、scrollHeight屬性會進行四捨五入並返回整數，如果你需要小數形式的值，使用element.getBoundingClientRect().

示例

//如果元素位於其滾動的末尾，則以下等效性返回true，否則返回false。
element.scrollHeight - element.scrollTop === element.clientHeight

//當容器不滾動但有溢位的子容器時，這些檢查確定容器是否可以滾動：
window.getComputedStyle(element).overflowY === 'visible'
window.getComputedStyle(element).overflowY !== 'hidden'

應用場景

• 監聽onscroll事件，以上等式可以用來判定使用者是否閱讀過文字。
• 監聽onscroll事件，可以進行滾動載入。

瀏覽器相容性

參考：

1. https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollWidth
2. https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollHeight

總結：

• 垂直滾動條不存在時,當border-left為0、border-right為0，offsetWidth 、clientWidth、scrollWidth三者相等

• 水平滾動條不存在時,當border-top為0、border-bottom為0，offsetHeight 、clientHeight、scrollHeight三者相等