offsetHeight clientHeight scrollHeight三者的区别与浏览器表现

最新推荐文章于 2024-11-16 15:25:49 发布
原创 最新推荐文章于 2024-11-16 15:25:49 发布 · 770 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

博客介绍了文档中offsetHeight、clientHeight和scrollHeight三个高度属性。offsetHeight为内容区域高度，等于height + padding + border；clientHeight是可视窗口高度，等于height + padding；scrollHeight根据内容与可视窗口高度关系而定，计算公式为srcollTop + clientHeight + offsetHeight。

offsetHeight = height + padding + border;
clientHeight = height + padding;
scrollHeight = srcollTop + clientHeight + offsetHeight;
在文档中offsetHeight是内容区域的高度 document.document.offsetHeight + document.body.offsetHeight;
文档中的clientHeight是指可视窗口的高度；
文档中的scrollHeight：如果内容区域高度大于可视窗口，scrollHeight指内容区域高度；如果内容区域高度小于可视窗口，scrollHeight指可视窗口高度

JS中clientHeight、scrollHeight和offsetHeight的大坑，滚动条抖动问题解决
郑伟斌的博客
04-09 2万+
JS中clientHeight、scrollHeight和offsetHeight的大坑，滚动条抖动问题解决1.什么是clientHeight、scrollHeight和offsetHeight1.1 clientHeight是什么1.2 offsetHeight是什么1.3 clientHeight和offsetHeight的注意点1.4 scrollHeight和它的大坑jQuery和原生js...
分析clientHeight、offsetHeight、scrollHeight
03-16
NULL 博文链接：https://love2java.iteye.com/blog/403776
height、clientHeight、scrollHeight、offsetHeight区别
weixin_30587927的博客
12-02 170
我们来实现test中的onclick事件 function justAtest(){ var test= document.getElementById("test"); var test2=document.getElementById("test2") var test3=document.getElementById...
clientHeight和offsetHeight
树上骑个猴的博客
12-22 7434
clientHeight：包括padding但不包括border、水平滚动条、margin的元素的高度。对于inline的元素这个属性一直是0，单位px，只读元素。 offsetHeight：包括padding、border、水平滚动条，但不包括margin的元素的高度。对于inline的元素这个属性一直是0，单位px，只读元素。 style.height //返回元素的高度（包括元素高度，不包括内边距、边框和外边距） clientHeight //返回元素的高度（包括元素高度、
clientHeight、scrollHeight、offsetHeight和scrollTop之间区别
宁静致远
09-29 1677
屏幕可见区域高（内容的可视高度，不包括边框，边距或滚动条）：document.body.clientHeight 正文内容高（整个元素的高度，包括带滚动条的隐蔽的地方）：document.body.scrollHeight 内容高+padding+边框：document.body.offsetHeight 滚动条已经滚动的高度：document.body.scrollTop 屏幕分辨率高：
clientHeight、scrollHeight、offsetHeight的区别和理解
kzj0916的博客
09-08 784
说的再多也比不上一个例子好理解—看图 目前页面是停留在蓝色区域的，下面的是看不见的，蓝色区域包满了整个可视区屏幕 蓝色区域为我们可视化的区域，红色边框包围的为总页面的区域 即红 粉 黄 的高度和 现在scrollHeight = 红色边框的高度 （若没固定高度，会随着内容改变）内容的实际高度+上下padding clientHeight= 蓝色区域的高度 （相当于我们可视化的高度，这是固定的）（height+padding，不包含边框） offsetHeight 和 clientHeight差不多，不过它包
解析offsetHeight,clientHeight,scrollHeight之间的区别
09-04
下面将详细解释这三个属性的区别及其在不同浏览器中的表现。 1. **offsetHeight** offsetHeight属性表示元素的总高度，包括边框（border）、内填充（padding）以及元素内容的高度。在大多数浏览器中，它还会包含...
07-offsetHeight-scrollHeight-clientHeight-区别.md
03-31
本篇文章将详细解读offsetHeight、scrollHeight、clientHeight这三个属性的概念和区别，帮助求职者和前端开发者在面试或实际工作中能更加准确地使用这些属性。 ### offsetHeight和offsetWidth属性 offsetHeight和...
offsetHeight,clientHeight,height
网站开发初中级代码参考-转载
07-10 195
offsetHeight:包括内容、内边距、边框的高度 clientHeight:包括内容、内边距的高度 看一下下边的css定义后的效果 .game-opt {margin-top: 10px;margin-bottom: 10px;padding-top: 3px;height: 20px;border: solid 1px; } >> $('.game-opt')...
clientHeight、offsetHeight 区别
高先生的猫
03-31 370
16-简单理解offsetHeight与clientHeight的区别
最新发布
weixin_46002095的博客
11-16 1009
是一个只读属性，它表示元素的总高度，包括元素的边框(border)、内边距(padding)和水平滚动条的高度（如果存在）。具体而言，等于元素的内容高度(content height) 加上内边距、边框和水平滚动条的高度。也是一个只读属性，它表示元素的内部高度，包括内边距(padding)，但不包括边框(border)和水平滚动条的高度（如果存在）。具体而言，等于元素的内容高度(content height) 加上内边距的高度。
【JavaScript】clientWidth 和 clientHeight 与 offsetWidth 和 offsetHeight 属性详解
lph159的博客
09-11 2225
和是用于获取元素的内部宽度和高度的属性，通常用于测量内容区域的大小。：返回元素的内部宽度，包括内边距（padding），但不包括边框（border）、外边距（margin）和水平滚动条（如果有的话）。返回的值是整数。：与类似，返回元素的内部高度，包含内边距，不包括边框、外边距和水平滚动条。这两个属性常用于获取元素的实际可视区域，尤其是在处理带有内边距的容器时，可以帮助更好地控制内容的显示效果。和是更为完整的宽高属性，包含了元素的边框和滚动条。
clientHeight vs. offsetHeight
Coding是人生最惬意的事情
10-21 4488
许多文章已经介绍了clientHeight和offsetHeight的区别，就是clientHeight的值不包括scrollbar的高度，而offsetHeight的值包括了scrollbar的高度。然而，clientHeight和offsetHeight的值到底由什么组成的呢？如何计算这两个数的值？1. clientHeight和offsetHeight的值由什么决定？假如我们有以下的
clientHeight、offsetHeight、scrollHeight详解
weixin_34186128的博客
12-25 249
网页可见区域宽： document.body.clientWidth; 网页可见区域高： document.body.clientHeight; 网页可见区域宽： document.body.offsetWidth(包括边线的宽); 网页可见区域高： document.body.offsetHeight(包括边线的高); 网页正文全文宽...
offsetHeight和clientHeight的区别
teresa502的专栏
08-24 1090
clientHeight大家对 clientHeight 都没有什么异议，都认为是内容可视区域的高度，也就是说页面浏览器中可以看到内容的这个区域的高度，一般是最后一个工具条以下到状态栏以上的这个区域，与页面内容无关。offsetHeightIE、Opera 认为 offsetHeight = clientHeight + 滚动条 + 边框。NS、FF 认为 offsetHeight 是网页内容实际高度，可以小于 clientHeight。
clientHeight、offsetHeight、scrollHeight三者区别与浏览器表现
Soochow_zhangyu的博客
11-26 1470
提要 clientHeight指客户区高度，本应该返回浏览器可见区域高度，但是，前面的元素如果不是documentElement，则返回盒子高度（包括填充和边框） offsetHeight指偏移之后的高度，offsetTop和offsetLeft分别指当前元素相对于父元素的偏移（也就是外边距），故offsetHeight则是指元素本身高度（包括填充和边框），不过，在IE11以下的版本，如果前缀元...
css clientheight、offsetheight、scrollheight详解
热门推荐
wangjun5159的专栏
02-07 1万+
介绍网上介绍clientheight、offsetheight、scrollheight的帖子很多，看后感觉明白了，一细想似乎又不明白了。为了获取更权威的解答，查阅了MDN 文档，希望能帮助后来人。为了加深理解，看后，最好做下后边的实验。 clientheightclientheight，内容的可视区域，不包含border。clientheight=padding+height-横向滚动轴高度。
clientHeight、offsetHeight 区别 笔记
weixin_30367543的博客
12-17 153
一张图 说明全部 clientHeight和clientWidth用于描述元素内尺寸，是指元素内容+内边距大小，不包括边框（低版本IE下实际包括）、外边距、滚动条部分 offsetHeight和offsetWidth用于描述元素外尺寸，是指元素内容+内边距+边框，不包括外边距和滚动条部分 clientTop和clientLeft返回内边距的边缘和边框的外...
offsetLeft,Left,clientLeft的区别
xo_tobacoo
09-16 282
js开发富客户端必须要掌握的，本来打算自己总结下，不过baidu到这篇非常简单易懂:请参考图看   假设 obj 为某个 HTML 控件。 obj.offsetTop 指 obj 相对于版面或由 offsetParent 属性指定的父坐标的计算上侧位置，整型，单位像素。 obj.offsetLeft 指 obj 相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置，整型，单位...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值