关于元素的一些属性
在前端的日常开发中,我们经常无可避免的需要获取或者监听一些页面的属性,那么我们需要经常了解一些属性代表的含义才能更好地使用这些属性。特别是一下这些:
属性的定义
关于尺寸相关的属性定义:
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内容请搜索脚本之家以前的文章或继续浏览下面的相关文章,希望大家以后多多支持脚本之家!
效果图: 整体效果: 视频加载: 拍照: 第一步:创建HTML元素 首先,我们要创建...
运维工程师这个岗位不同于后端开发岗位,到底运维工程师平时做什么? 老司机告诉...
官方文档 https://developers.weixin.qq.... index.wxml view class="container"...
content [Ctrl+A 全选 注: 引入外部Js需再刷新一下页面才能执行 ] 终于见识了这...
下面介绍一下div嵌套div时margin不起作用的解决方案。 顺便科普下margin的定义和...
不知道从什么时候开始,在网络上到处可以看到div+css,到底什么是div+css呢?难...
链接可以制作 WML 卡片来显示 WML 的锚功能,图像可以制作 WML 卡片来显示图像. ...
本文学习的内容主要如下所示: 1.关闭按钮 2.Carets 3.快速设置浮动 4.内容区域...
通过 display:bolck/none 完成一个菜单栏的效果 图1: 首先下面是已经完成的一...
Dreamweaver中的代码想要插入注释,该怎么添加呢?下面我们就来看看详细的教程。...