詳解HTML元素的height、offsetHeight、clientHeight、scrollTop等梳理

關(guān)于元素的一些屬性

在前端的日常開發(fā)中，我們經(jīng)常無可避免的需要獲取或者監(jiān)聽一些頁面的屬性，那么我們需要經(jīng)常了解一些屬性代表的含義才能更好地使用這些屬性。特別是一下這些：

• 尺寸相關(guān)：offsetHeight、clientHeight、scrollHeight；
• 偏移相關(guān)：offsetTop、clientTop、scrollTop、pageYOffset、scrollY；
• 獲取相對視口位置：Element.getBoundingClientRect()；
• 獲取元素的style對象：Window.getComputedStyle(Element)；

屬性的定義

關(guān)于尺寸相關(guān)的屬性定義：

offsetHeight: Element.offsetHeight是一個(gè)只讀屬性，返回的是元素對應(yīng)的高度px的值，是一個(gè)整數(shù)值，不存在小數(shù)，

• 隱藏元素返回0；
• 其他返回：元素的innerHeight + padding + border + margin + 滾動(dòng)條；但是不包括里面的::before or ::after偽元素；

clientHeight: Element.clientHeight是一個(gè)只讀屬性，返回的是元素對應(yīng)的高度px的值，是一個(gè)整數(shù)值，不存在小數(shù)，

• 對于沒有設(shè)置樣式或者inline元素而言，返回的是0，
• 對于html元素或者怪異模式下的body，返回的是viewport高度，也就是整個(gè)頁面視口高度
• 其他情況下：元素的innerHeight + padding；不包括border、margin、滾動(dòng)條；

scrollHeight: 是一個(gè)只讀屬性，返回的是元素對應(yīng)的高度px的值，是一個(gè)整數(shù)值，不存在小數(shù)，

• 在子元素不存在滾動(dòng)情況下，和Element.clientHeight一樣
• 在子元素存在滾動(dòng)情況下，會是所以子元素的clientHeight高度之和 + 自身padding；

window.innerHeight: (瀏覽器窗口高度，不包含工具欄，菜單等，僅僅是可視區(qū)域dom的height)
window.outerHeight: (瀏覽器窗口高度，包含工具欄、菜單等,整個(gè)瀏覽器的height)

關(guān)于偏移：

offsetTop：只讀屬性，返回元素距離最近一個(gè)相對定位的父元素內(nèi)邊線的頂部距離，實(shí)際使用時(shí)可能存在不同樣式引起的相對定位父元素不一致的兼容性問題。
clientTop：上邊框的寬度
scrollTop：

• 對于滾動(dòng)元素而言，就是已經(jīng)滾動(dòng)的距離，
• 對于html而言，就是window.scrollY

window.scrollY，別名：window.pageYOffset，根節(jié)點(diǎn)已經(jīng)垂直滾動(dòng)的距離

開發(fā)中所需的相關(guān)數(shù)據(jù)

獲取整個(gè)頁面的可視區(qū)高度：【不需要可視區(qū)外的高度】

const height = window.innerHeight
    || document.documentElement.clientHeight
    || document.body.clientHeight;

獲取整個(gè)頁面的高度：【包括可視區(qū)外的】

const height = document.documentElement.offsetHeight
    || document.body.offsetHeight;

獲取整個(gè)頁面的垂直滾動(dòng)高度：

const scrollTop = document.documentElement.scrollTop
    || document.body.scrollTop;

獲取元素相對根節(jié)點(diǎn)頂部的距離：

// 對于相對于根節(jié)點(diǎn)定位的元素
const top = Element.offsetTop;

// 對于非相對于根節(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；

獲取元素相對可視區(qū)域頂部距離：

const top = Element.getBoundingClientRect().top;

設(shè)置整個(gè)頁面的垂直滾動(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)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！