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