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

　　关于元素的一些属性

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

　　属性的定义

　　关于尺寸相关的属性定义：

　　offsetHeight: Element.offsetHeight是一个只读属性，返回的是元素对应的高度px的值，是一个整数值，不存在小数，

　　clientHeight: Element.clientHeight是一个只读属性，返回的是元素对应的高度px的值，是一个整数值，不存在小数，

　　scrollHeight: 是一个只读属性，返回的是元素对应的高度px的值，是一个整数值，不存在小数，

　　window.innerHeight: (浏览器窗口高度，不包含工具栏，菜单等，仅仅是可视区域dom的height)

　　window.outerHeight: (浏览器窗口高度，包含工具栏、菜单等,整个浏览器的height)

　　关于偏移：

　　offsetTop：只读属性，返回元素距离最近一个相对定位的父元素内边线的顶部距离，实际使用时可能存在不同样式引起的相对定位父元素不一致的兼容性问题。

　　clientTop：上边框的宽度

　　scrollTop：

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