關于元素的一些屬性
在前端的日常開發中，我們經常無可避免的需要獲取或者監聽一些頁面的屬性，那么我們需要經常了解一些屬性代表的含義才能更好地使用這些屬性。特別是一下這些：
- 尺寸相關：offsetHeight、clientHeight、scrollHeight；
- 偏移相關：offsetTop、clientTop、scrollTop、pageYOffset、scrollY；
- 獲取相對視口位置：Element.getBoundingClientRect()；
- 獲取元素的style對象：Window.getComputedStyle(Element)；
屬性的定義
關于尺寸相關的屬性定義：
offsetHeight: Element.offsetHeight是一個只讀屬性，返回的是元素對應的高度px的值，是一個整數值，不存在小數，
- 隱藏元素返回0；
- 其他返回：元素的innerHeight + padding + border + margin + 滾動條；但是不包括里面的::before or ::after偽元素；
clientHeight: Element.clientHeight是一個只讀屬性，返回的是元素對應的高度px的值，是一個整數值，不存在小數，
- 對于沒有設置樣式或者inline元素而言，返回的是0，
- 對于html元素或者怪異模式下的body，返回的是viewport高度，也就是整個頁面視口高度
- 其他情況下：元素的innerHeight + padding；不包括border、margin、滾動條；
scrollHeight: 是一個只讀屬性，返回的是元素對應的高度px的值，是一個整數值，不存在小數，
- 在子元素不存在滾動情況下，和Element.clientHeight一樣
- 在子元素存在滾動情況下，會是所以子元素的clientHeight高度之和 + 自身padding；
window.innerHeight: (瀏覽器窗口高度，不包含工具欄，菜單等，僅僅是可視區域dom的height)
window.outerHeight: (瀏覽器窗口高度，包含工具欄、菜單等,整個瀏覽器的height)
關于偏移：
offsetTop：只讀屬性，返回元素距離最近一個相對定位的父元素內邊線的頂部距離，實際使用時可能存在不同樣式引起的相對定位父元素不一致的兼容性問題。
clientTop：上邊框的寬度
scrollTop：
- 對于滾動元素而言，就是已經滾動的距離，
- 對于html而言，就是window.scrollY
window.scrollY，別名：window.pageYOffset，根節點已經垂直滾動的距離
開發中所需的相關數據
獲取整個頁面的可視區高度：【不需要可視區外的高度】
const height = window.innerHeight
|| document.documentElement.clientHeight
|| document.body.clientHeight;
獲取整個頁面的高度：【包括可視區外的】
const height = document.documentElement.offsetHeight
|| document.body.offsetHeight;
獲取整個頁面的垂直滾動高度：
const scrollTop = document.documentElement.scrollTop
|| document.body.scrollTop;
獲取元素相對根節點頂部的距離：
// 對于相對于根節點定位的元素
const top = Element.offsetTop;
// 對于非相對于根節點定位的元素，需要循環獲取
getElementTop(element) {
let actualTop = element.offsetTop
let current = element.offsetParent
while (current !== null) {
actualTop += current.offsetTop
current = current.offsetParent
}
return actualTop
}
// 還有一中方法 滾動距離 + 距離視口上邊距
const top = Element.getBoundingClientRect().top + window.scrollY；
獲取元素相對可視區域頂部距離：
const top = Element.getBoundingClientRect().top;
設置整個頁面的垂直滾動位置：
const isCSS1Compat = ((document.compatMode || "") === "CSS1Compat");
if (isCSS1Compat) {
document.documentElement.scrollTop = 100;
} else {
document.body.scrollTop = 100;
}
到此這篇關于詳解HTML元素的height、offsetHeight、clientHeight、scrollTop等梳理的文章就介紹到這了,更多相關height、offsetHeight、clientHeight、scrollTop內容請搜索腳本之家以前的文章或繼續瀏覽下面的相關文章，希望大家以后多多支持腳本之家！
