HTMLElement.offset

##HTMLElement.offsetParent

簡介

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

都是相對於其內邊距邊界的。

語法

var parentObj = element.offsetParent;

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

瀏覽器相容性

• 在 Webkit 中，如果元素為隱藏的（該元素或其祖先元素的 style.display 為 “none”），或者該元素的 style.position 被設為 “fixed”，則該屬性返回 null。
• 在 IE 9 中，如果該元素的 style.position
  被設定為 “fixed”，則該屬性返回 null。（display:none 無影響。）

參考：

##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

瀏覽器相容性

參考：

HTMLElement.offsetWidth&HTMLElement.offsetHeight

簡介

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

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

• 通常，元素的offsetHeight是一種元素CSS高度的衡量標準，包括元素的邊框、內邊距和元素的水平滾動條（如果存在且渲染的話），不包含: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

瀏覽器相容性

參考：

Element.clientWidth&Element.clientHeight

簡介

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

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

• clientWidth 可以通過 CSS width + CSS padding - 垂直滾動條高度 (如果存在)來計算.
• clientHeight 可以通過 CSS height + CSS padding - 水平滾動條高度 (如果存在)來計算.
• box-sizing:border-box時，clientWidth、clientHeight不包括border和padding

語法

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

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

示例

應用場景

• XXX

瀏覽器相容性

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

參考：

HTMLElement.scrollWidth& HTMLElement.scrollHeight

簡介

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

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

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

語法

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事件，可以進行滾動載入。

瀏覽器相容性

參考：