关于元素的一些属性
在前端的日常开发中,我们经常无可避免的需要获取或者监听一些页面的属性,那么我们需要经常了解一些属性代表的含义才能更好地使用这些属性。特别是一下这些:
- 尺寸相关: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; }
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件!
如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
金钱帮资源网 Copyright www.kbjia.com
暂无“详解HTML元素的height、offsetHeight、clientHeight、scrollTop等梳理”评论...
更新日志
2024年06月14日
2024年06月14日
- 陈百强《感恩有你》DSD+SBM版[WAV+CUE][560MB]
- 世界启元光秀强度怎么样 光秀属性面板解析
- 世界启元古希腊文明怎么样 古希腊文明选择推荐
- 世界启元法兰西文明怎么样 法兰西文明选择推荐
- 群星《极度深情3CD》[WAV分轨]
- 群星《极品HIFI·女声情烧30首HQCD》2CD[WAV]
- 闽南语发烧音乐至尊典藏-《迷醉的歌声·声声醉》[WAV】
- 悔悟了?IGN法国为《黑神话》争议言论正式致歉
- Xbox发布会汇总:战争机器、毁灭战士新作亮相!
- IGN法国无知发言开团《黑神话》:金箍棒不是棉签
- 群星.2002-欢庆迪斯尼100周年3CD【滚石】【WAV+CUE】
- DRY.1998-TWO【正东】【WAV+CUE】
- 马常胜.2012-油菜花开的季节【风潮】【WAV+CUE】
- 世界启元光秀命运羁绊怎么样 光秀命运羁绊介绍
- 世界启元不列颠文明怎么样 不列颠文明选择推荐