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

对于元素的一些属性

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

  1. 尺寸相干:offsetHeight、clientHeight、scrollHeight;
  2. 偏移相干:offsetTop、clientTop、scrollTop、pageYOffset、scrollY;
  3. 获取绝对视口地位:Element.getBoundingClientRect();
  4. 获取元素的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;
}

评论

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

这个站点使用 Akismet 来减少垃圾评论。了解你的评论数据如何被处理