详解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内容请搜刮剧本之家早年的文章或继承赏识下面的相干文章，但愿各人往后多多支持剧本之家！

（编辑：湖南网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!