关于javascript:HTML元素的heightoffsetHeightclientHeightscrollTop等梳理

32次阅读

共计 1957 个字符，预计需要花费 5 分钟才能阅读完成。

在前端的日常开发中，咱们常常无可避免的须要获取或者监听一些页面的属性，那么咱们须要常常理解一些属性代表的含意能力更好地应用这些属性。特地是一下这些：

尺寸相干：offsetHeight、clientHeight、scrollHeight；
偏移相干：offsetTop、clientTop、scrollTop、pageYOffset、scrollY；
获取绝对视口地位：Element.getBoundingClientRect()；
获取元素的 style 对象：Window.getComputedStyle(Element)；

对于尺寸相干的属性定义：

offsetHeight: Element.offsetHeight 是一个只读属性，返回的是元素对应的高度 px 的值，是一个整数值，不存在小数，
1. 暗藏元素返回 0；
2. 其余返回：元素的 innerHeight + padding + border + margin + 滚动条；然而不包含外面的::before or ::after 伪元素；
clientHeight: Element.clientHeight 是一个只读属性，返回的是元素对应的高度 px 的值，是一个整数值，不存在小数，
1. 对于没有设置款式或者 inline 元素而言，返回的是 0，
2. 对于 html 元素或者怪异模式下的 body，返回的是 viewport 高度，也就是整个页面视口高度
3. 其余状况下：元素的 innerHeight + padding；不包含 border、margin、滚动条；
scrollHeight: 是一个只读属性，返回的是元素对应的高度 px 的值，是一个整数值，不存在小数，
1. 在子元素不存在滚动状况下，和 Element.clientHeight 一样
2. 在子元素存在滚动状况下，会是所以子元素的 clientHeight 高度之和 + 本身 padding；
window.innerHeight: (浏览器窗口高度，不蕴含工具栏，菜单等，仅仅是可视区域 dom 的 height)
window.outerHeight: (浏览器窗口高度，蕴含工具栏、菜单等, 整个浏览器的 height)

对于偏移：

offsetTop：只读属性，返回元素间隔最近一个绝对定位的父元素内边线的顶部间隔，理论应用时可能存在不同款式引起的绝对定位父元素不统一的兼容性问题。
clientTop：上边框的宽度
scrollTop：
1. 对于滚动元素而言，就是曾经滚动的间隔，
2. 对于 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;}

正文完