当前位置:首页 >  站长 >  编程技术 >  正文

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

 2020-11-30 14:04  来源: 脚本之家   我来投稿   球球的个人主页 撤稿纠错

  短视频,自媒体,达人种草一站服务

这篇文章主要介绍了详解HTML元素的height、offsetHeight、clientHeight、scrollTop等梳理,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

关于元素的一些属性

在前端的日常开发中,我们经常无可避免的需要获取或者监听一些页面的属性,那么我们需要经常了解一些属性代表的含义才能更好地使用这些属性。特别是一下这些:

尺寸相关: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内容请搜索脚本之家以前的文章或继续浏览下面的相关文章,希望大家以后多多支持脚本之家!

来源:脚本之家

链接:https://www.jb51.net/web/748473.html

申请创业报道,分享创业好点子。点击此处,共同探讨创业新机遇!

作者: 球球    /    文章:1184篇

相关标签
html

相关文章

  • HTML+Sass实现HambergurMenu汉堡包式菜单

    这篇文章主要介绍了HTML+Sass实现HambergurMenu,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

    标签:
    html
  • HTML页面自适应宽度的table表格

    这篇文章主要介绍了HTML页面自适应宽度的table(表格),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

    标签:
    html
  • HTML用户注册页面设置源码

    这篇文章主要介绍了HTML用户注册页面设置源码,代码简单易懂,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

    标签:
    html
  • html指定页面字符集的两种方法

    这篇文章主要介绍了html指定页面字符集的两种方法,帮助大家更好的制作网页,感兴趣的朋友可以了解下

    标签:
    html
  • HTML基本标签及结构详解

    这篇文章主要介绍了HTML基本标签及结构详解,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

    标签:
    html

热门排行

信息推荐

扫一扫关注最新创业资讯