【前端】clientHeight, offsetHeight,scrollHeight, offsetTop,scrollTop

最新推荐文章于 2025-07-23 20:36:39 发布
原创 最新推荐文章于 2025-07-23 20:36:39 发布 · 659 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#前端 #angular #chrome

本文详细介绍了CSS中几个关键的元素尺寸属性：clientHeight表示内容区域加内边距的高度，不包括边框和滚动条；offsetHeight则包括内容、内边距、边框及滚动条；offsetTop表示元素相对于父元素顶部的位置；scrollHeight则表示元素总高度，包括不可见部分。了解这些属性对于前端开发者优化页面布局和滚动行为至关重要。

  • clientHeight
    clientHeight = content height + paddingTop + paddingBottom
    clientHeight并不会包含border和横向滚动条的高度
    对于行内元素，值为0

  • offsetHeight
    offsetHeight = content height + paddingTop + paddingBottom + borderTop + borderBottom + 横向滚动条高度
    offsetHeight不会包含margin
    对于行内元素，值为0

  • offsetTop
    从父级元素的顶部位置到该元素的当前顶部位置

  • scrollHeight
    若要滚动条，scrollHeight表示整个元素的高度，即不可见元素的高度。可见部分的高度为clientHeight

  • scrollTop
    滚动条向下滚动的距离

procstu
关注
pagyX/Y、clientX/Y、offsetX/Y、screenX/Y；clientHeight、scrollHeight、scrollTop；offsetHeight、offsetTop+滑动条
m0_56029970的博客
09-01 218
JavaScript尺寸和位置的理解，外加简易滑动条实例
JS中offsetTop、clientTop、scrollTop、offsetTop各位置属性详解（含示例图）
CheyBen的博客
01-08 3105
MDN文档 首先：每个HTML元素都具有clientHeight、offsetHeight、scrollHeight、offsetTop、scrollTop 这5个和元素高度、滚动、位置相关的属性。 clientHeight和offsetHeight属性表示元素的高度，和元素的滚动、位置没有关系。 返回值未因浏览器区别存在差异的属性： clientHeight、clientWidth、 ...
clientHeight
04-08
四种浏览器对_clientHeight、offsetHeight、scrollHeight、clientWidth、offsetWidth_和_scrollWidth_的解
搞清clientHeight、offsetHeight、scrollHeight、offsetTop、scrollTop
热门推荐
qq_35430000的博客
05-11 17万+
转载自：https://www.imooc.com/article/17571网页可见区域高：document.body.clientHeight网页正文全文高：document.body.scrollHeight网页可见区域高（包括边线的高）：document.body.offsetHeight网页被卷去的高：document.body.scrollTop屏幕分辨率高：window.screen...
【前端 | CSS】盒模型clientWidth、clientHeight、offsetWidht、offsetHeight
趟过java，遇见web
08-10 2095
只读属性Element.clientWidth对于内联元素以及没有 CSS 样式的元素为 0；该属性包括内边距（padding），但不包括边框（border）、外边距（margin）和垂直滚动条（如果存在） offsetWidth 是测量包含元素的边框 (border)、水平线上的内边距 (padding)、竖直方向滚动条 (scrollbar)（如果存在的话）、以及 CSS 设置的宽度 (width) 的值。
ClientHeight
08-24 1215
window.screen.availWidth 返回当前屏幕宽度(空白空间) window.screen.availHeight 返回当前屏幕高度(空白空间) window.screen.width 返回当前屏幕宽度(分辨率值) window.screen.heig
JavaScript之scrollTop、scrollHeight、offsetTop、offsetHeight等属性学习笔记
10-15
JavaScript中的几个关键属性——scrollTop、scrollHeight、offsetTop和offsetHeight，对于网页动态效果和页面交互的实现至关重要。这些属性都是用来处理元素在视口中的位置以及可滚动内容的尺寸。 1. scrollTop属性...
JavaScript滚动属性详解：scrollTop、scrollHeight、offsetTop与offsetHeight
"这篇学习笔记主要探讨了JavaScript中与页面滚动相关的几个重要属性：scrollTop、scrollHeight、offsetTop和offsetHeight。这些属性在处理页面布局和动态效果时扮演着重要角色，尤其对于开发者来说，理解它们的工作...
前端中的scrollHeight 、scrollTop、clientHeight等意思
jjw_zyfx的博客
10-25 4064
要记住 通过 标签.style.width是获取不到宽度的，如果必须要获取可以通过clientWidth，或者是offsetWidth 完成这个动作需要先知道三个高度： scrollHeight 文档内容实际高度，包括超出视窗的溢出部分 scrollTop 滚动条距元素(不一定是屏幕最顶端)顶部滚动的距离 clientHeight窗口可视范围高度（就是自己能看到的高度，如果这...
分析clientHeight、offsetHeight、scrollHeight
03-16
NULL 博文链接：https://love2java.iteye.com/blog/403776
clientHeight offsetHeight scrollHeight clientWidth详解
07-21
clientHeight offsetHeight scrollHeight clientWidth详解
clientHeight(用于获取元素的可视高度)
最新发布
2301_81726198的博客
07-23 361
返回元素内部的高度（以像素为单位），这个高度包括内容区域和内边距（padding），但不包括边框、滚动条和外边距。：它通常用于获取元素在屏幕上实际显示的高度，比如确定一个容器在不滚动的情况下能显示多少内容。是一个只读属性，你不能设置它的值。
【基本概念】clientHeight / offsetHeight / scrollHeight / window.screen.height / window.screen.availHeight
weixin_41604040的博客
12-02 953
【基本概念】clientHeight / offsetHeight / scrollHeight / window.screen.height / window.screen.availHeight测试结果讨论 参考博客： https://blog.youkuaiyun.com/qq_35430000/article/details/80277587 https://www.cnblogs.com/chuaWeb/p/html_css_1.html 以下测试和结论均基于Chrome浏览器 86.0.4240.198 (
前端学习笔记（21）之JS中的offsetWidth、offsetHeight、clientWidth、clientHeight等等的详细介绍
前端下午茶
08-19 1042
offsetWidth //返回元素的宽度（包括元素宽度、内边距和边框，不包括外边距） offsetHeight //返回元素的高度（包括元素高度、内边距和边框，不包括外边距） clientWidth //返回元素的宽度（包括元素宽度、内边距，不包括边框和外边距） clientHeight //返回元素的高度（包括元素高度、内边距，不包括边框和外边距） style.width //返回元素的宽度（包括元素宽度，不包括内边距、边框和外边距） st
详解clientHeight、offsetHeight、scrollHeight、offsetTop、scrollTop
zag666的博客
10-27 1267
clientHeight： 内容可视区域的高度，也就是说页面浏览器中可以看到内容的这个区域的高度。包括padding但不包括border、水平滚动条、margin的元素的高度。 scrollHeight: 滚动大小，指的是包含滚动内容的元素大小（元素内容的总高度）。 IE、Opera 认为 scrollHeight 是网页内容实际高度，可以小于 clientHeight。 NS、FF 认为 scr...
关于clientHeight、scrollHeight、offsetHeight、window.innerHeight、window.outerHeight等元素及浏览器属性浅析
qq_44382590的博客
09-20 2712
前几天笔试碰到了一道关于可视区域高度通过什么属性取值的问题，面对四个选项一脸傻样儿，赶紧复习了一下。发现element的clientHeight、scrollHeight、offsetHeight和window的outerHeight、innerHeight、screen.height这几个属性还真不好区分，在网上查阅一番资料后，总结出来供以后参考。 这篇文章会说明documentElement（html）、body、普通的element（如div）作为Element对象...
关于clientHeight、offsetHeight、scrollHeight
yuanfangderen
06-14 36
document.body 或者document.documentElement 1.clientHeight 指当前窗口的高度 clientWidth 当前窗口的宽度 2.谷歌中document.documentElement.offsetHeight 为0； 　　　　　document.body.offsetHeight js错误 　　IE 中document.doc...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值