JS的元素偏移量offset.元素可視區client.元素滾動scroll.的作用及其區別

1.元素偏移量offset;

我們可以使用offset系列相關屬性可以動態的得到元素的位置(偏移).大小等…

• element.offsetParent; 返回的是該元素的帶有定位的父級元素,如果父級沒有定位就返回body.

• element.offsetTop; 返回元素相對帶有定位的父級元素上方的偏移

• element.offsetLeft; 返回元素相對帶有定位的父級元素左方的偏移
  我們常用的兩種屬性

• element.offsetWidth; 返回自身包括padding.邊框.內容區域的寬度

• element.offsetHeight; 返回自身包括padding.邊框.內容區域的高度
  注意:這幾個屬性返回的數值都不帶單位.

---

元素可視區client系列

使用client系列屬性可以來獲取元素可視區的相關信息.可以動態的獲取元素的邊框大小,元素大小.

• element.clientTop; 返回的是元素上邊框的大小
• element.clientLeft; 返回的是元素左邊框的大小
• element.clientWidth; 返回自身包括padding,內容區的寬度,不含邊框,返回的數值不帶單位
• element.clientHeight; 返回自身包括padding,內容區的高度,不含邊框,返回的數值不帶單位.

---

元素滾動scroll.

我們使用scroll系列的相關屬性可以動態的得到該元素的大小,滾動距離.

• element.scrollTop; 返回被捲去的上側距離
  我們經常用這個屬性

• element.scrollLeft; 返回被捲去的左側距離

• element.scrollWidth; 返回自身實際的寬度,不含邊框

• element.scrollHeight; 返回自身實際的高度,不含邊框

• 注意:返回的數值都不帶單位
  如果是頁面被捲去頭部可以通過window.pageYOffset獲得;
  如果是頁面被捲去左側可以通過window.pageXOffset獲得;