搞清clientHeight、offsetHeight、scrollHeight、offsetTop、scrollTop

news2025/1/21 6:30:01

网页可见区域高:document.body.clientHeight
网页正文全文高:document.body.scrollHeight
网页可见区域高(包括边线的高):document.body.offsetHeight
网页被卷去的高:document.body.scrollTop
屏幕分辨率高:window.screen.height

每个HTML元素都具有clientHeight offsetHeight scrollHeight offsetTop scrollTop 这5个和元素高度、滚动、位置相关的属性,单凭单词很难搞清楚分别代表什么意思之间有什么区别。通过阅读它们的文档总结出规律如下:

clientHeight和offsetHeight属性和元素的滚动、位置没有关系它代表元素的高度,其中:
clientHeight:包括padding但不包括border、水平滚动条、margin的元素的高度。对于inline的元素这个属性一直是0,单位px,只读元素。
在这里插入图片描述
offsetHeight:包括padding、border、水平滚动条,但不包括margin的元素的高度。对于inline的元素这个属性一直是0,单位px,只读元素。
在这里插入图片描述
接下来讨论出现有滚动条时的情况:
当本元素的子元素比本元素高且overflow=scroll时,本元素会scroll,这时:
scrollHeight: 因为子元素比父元素高,父元素不想被子元素撑的一样高就显示出了滚动条,在滚动的过程中本元素有部分被隐藏了,scrollHeight代表包括当前不可见部分的元素的高度。而可见部分的高度其实就是clientHeight,也就是scrollHeight>=clientHeight恒成立。在有滚动条时讨论scrollHeight才有意义,在没有滚动条时scrollHeight==clientHeight恒成立。单位px,只读元素。

在这里插入图片描述
scrollTop: 代表在有滚动条时,滚动条向下滚动的距离也就是元素顶部被遮住部分的高度。在没有滚动条时scrollTop==0恒成立。单位px,可读可设置。
offsetTop: 当前元素顶部距离最近父元素顶部的距离,和有没有滚动条没有关系。单位px,只读元素。
在这里插入图片描述
offsetTop: 当前元素顶部距离最近父元素顶部的距离,和有没有滚动条没有关系。单位px,只读元素。

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/161173.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

SpringBoot实践(三十九):如何使用AOP

目录 直接使用Aspect 定义切面逻辑 模拟业务代码 测试输出 自定义注解方式 自定义切面注解 定义切入点逻辑 模拟业务代码 测试输出 面向切面(AOP) 是spring重要特性,在功能上切面编程是面向对象编程的很好的补充,面向对象强调封装和开…

BAT 名企大厂做接口自动化如何高效使用 Requests ?

1080428 28.9 KBRequests是一个优雅而简单的python HTTP库,其实python内置了用于访问网络的资源模块,比如urllib,但是它不如requests简单,优雅,而且缺少许多实用功能。接下来的接口测试的学习和实战,都与re…

语音识别系列之基于CTC的VAD

语音活动性检测(Voice Activity Dection, VAD)常作为语音识别系统的前端模块过滤非语音段,为后续增强模块提供语音/非语音判据,从而更好的掌握背景噪声特性,进而提升降噪量,保证识别性能,且能降…

GitHub进阶使用指南

GitHub进阶使用指南1.个性化 Github 首页2.自定义项目徽章3.自动为项目添加贡献情况图标4.高效阅读 Github 项目的源代码5.扩展 Github 的功能1.个性化 Github 首页 Github 目前支持在个人主页自定义展示一些内容: 想要做到这样非常简单,你只需要创建一…

创建切实可行的项目管理计划会带来什么好处?

项目管理计划是深入了解项目来龙去脉的地方,可以说是指导你从头到尾完成项目的地图。 项目章程是项目的高层次愿景,而项目管理计划将这一愿景分解为项目的实际日常执行,涵盖为实现项目目标所需要做的一切。 一个详细的项目计划将规划出从…

Java自动拆装箱与缓存——Java中的128陷阱

在讲解128陷阱之前,需要了解一些概念。 包装器类型 Java是面向对象的语言,但基本类型并不是面向对象的,从而出现了包装器类型,并且包装器添加了更多的属性和方法。如我们在使用集合类型Collection的时候就一定要使用包装类型而非…

高等学校学生公寓消防安全设计及管理设计要点

摘要:高等学校学生公寓是学生生活起居和日常活动的重要场所,具有人员同时聚集的特征,属于人员密集场所。特别是晚间休息时,此时宿舍内人员达到满员状态。学生的生活及学习物品,如被褥、衣服、书籍等,都属于…

Prometheus标签的使用说明

prometheus在处理数据指标的过程中,包括【抓取的生命周期】和【标签的生命周期】 默认情况下,当prometheus加载target实例完成后,这些target时候会包含一些默认的标签,这些标签将会告诉prometheus如何从target实例中获取监控数据…

【3】Linux多节点部署KubeSphere|最简单的安装方法

目录 步骤1:准备三台服务器 步骤2:下载KubeKey 步骤3:创建集群 1. 创建示例配置文件 2. 编辑配置文件 3. 使用配置文件创建集群 4. 验证安装 步骤1:准备三台服务器 4c8g (master)8c16g * 2 (worker)centos7.9内网互通每个机…

Tiktok的发展趋势以及政策支持,你了解多少?

武汉瑞卡迪电子商务有限公司:为了方便大家的阅读,这篇文章将分为以下几个板块: 1、Tiktok的基本介绍 2、Tiktok的发展趋势以及政策支持 3、新手运营Tiktok的方法 4、Tiktok引流的方法 一、Tiktok的基本介绍 TikTok TikTok国际版&#xf…

express 1.1安装express And 1.2创建项目

目录 1.1安装express 1.2.1 创建项目 (1)使用vscode,可以快速创建项目,vscode把终端聚合在了一起,打开vscode终端 (2)进入工作目录 (3)执行创建命令 (4&…

MySQL必知必会_SELECT部分

最近在读MySQL必知必会,关于这本书打算写点读后感,大概是两篇博客的体量。 其实对于测试岗来说,不管是面试还是实际工作中,最重要的自然当属SELECT。 下面我把书里关于SELECT的知识点简单记一下吧。 首先在MySQL中其实是不区分…

【MySQL】第二部分 MySQL的启动和登录

【MySQL】第二部分 MySQL的启动和登录 文章目录【MySQL】第二部分 MySQL的启动和登录2. MySQL的启动和登录2.1 服务的启动与停止2.2 客户端登录查看版本信息退出登录2.3 演示命令行的使用总结2. MySQL的启动和登录 2.1 服务的启动与停止 MySQL的安装就不过多介绍了,大家可以去…

OpenSceneGraph纹理API开发指南【OSG】

前面的教程中,我们用彩虹的所有颜色画了一个正方形。然而,还有另一种成为纹理映射的技术,将光栅二维图像应用于三维几何。在这种情况下,效果不是针对几何体的顶点,而是通过栅格化场景更改获得的所有像素的数据。这种技…

好雨科技加入龙蜥 完成与 Anolis OS 兼容适配

近日,北京好雨科技有限公司(以下简称“好雨科技”)签署了 CLA(Contributor License Agreement,贡献者许可协议) ,正式加入龙蜥社区(OpenAnolis)。好雨科技成立于 2015 年…

bug总是多不如看一看,前端写完代码进行的自测流程减少bug重复反工,提高开发效率。

提测标准:修改bug前要熟知之前的操作逻辑以及涉及其代码的周边逻辑,修改bug后的操作逻辑和测试确认,检测其它周边逻辑。至少需要另外1个开发进行交叉测试必要时进行代码Code Review(代码规范,主要逻辑,复杂…

服务器SMTP邮件设置

服务器SMTP邮件设置 在服务器设置登录验证时需要绑定一个自动收发邮件的服务器进行验证 这时候就要对STMP进行配置,如下 填写的主机为邮件对应的主机 腾讯QQ邮箱 POP3:pop.qq.com SMTP:smtp.qq.com IMAP:imap.qq.com 端口&…

1.13

周报 完善案例 ​ this.$nextTick(function () {this.$refs.input.focus()})}​ //点击编辑直接获取焦点 this.$refs.input.focus() //但是这种写法 由于input是用v-show控制的 所以执行了上面代码 改变了isEdit值 但是不会立马去重新解析模板 input框还没有出来 //将handleed…

算法第十期——DFS(深度优先搜索)的剪枝优化

目录 DFS:剪枝 DFS:有哪些剪枝方法 DFS例题一:剪格子 【思路】 DFS例题二:路径之谜 【样例分析】 DFS例题三:四阶幻方 【思路】 【做法一】 【做法二】 DFS例题三:分考场 【样例分析】 【思路】 DFS习题 DFS:剪…

TPM零知识学习十一 —— tpm全安装流程复盘(下)

接前一篇文章《TPM零知识学习十 —— tpm全安装流程复盘(中)》,链接为: TPM零知识学习十 —— tpm全安装流程复盘(中)_蓝天居士的博客-CSDN博客 五、TPM模拟器做成服务 本步骤前导步骤参见 《TPM零知识学…