scrollHeight innerHeight clientHeight offsetHeight

最新推荐文章于 2022-02-11 21:16:06 发布
最新推荐文章于 2022-02-11 21:16:06 发布
阅读量235 收藏
点赞数
分类专栏： 随笔
博客介绍了Web API中与高度和分辨率相关的属性。包括scrollHeight，还提及获取屏幕高度的window.innerHeight、屏幕分辨率的window.screen.width，以及clientHeight和offsetHeight的含义，clientHeight不含滚动条等，offsetHeight在此基础上加上边框和滚动条高度。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

scrollHeight https://developer.mozilla.org/zh-CN/docs/Web/API/Element/scrollHeight
window.innerHeight; 获取屏幕高度
window.screen.width 屏幕分辨率
clientHeight 视野内可见的内容和内边距，不包括x轴的滚动条高度、边框、外边距；
offsetHeight 在clientHeight的基础上， 加上边框和滚动条的高度；

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...
27 【三大家族scroll、offset、client】
DSelegent的博客
08-25 317
27 【三大家族scroll、offset、client】
innerHeight与clientHeight、innerWidth与clientWidth
weixin_30887919的博客
12-13 942
window对象： （1）innerHeight属性：窗口中文档显示区域的高度，不包括菜单栏、工具栏等部分。该属性可读可写。 IE不支持该属性，IE中body元素的clientHeight属性与该属性相同。 （2)innerWidth属性：窗口中文档显示区域的宽度，同样不包括边框。该属性可读可写。 IE不支持该属性，IE中body元素的clientWidth属性与...
【记录】innerHeight？clientHeight？offsetHeight？scrollTop？screenTop？.....一堆高度傻傻分不清
Youkirrr_的博客
02-11 450
1、window.screen window.screen.height 用户屏幕的高度。 window.screen.availHeight 浏览器窗口在屏幕上可占用的垂直空间，即最大高度。 不会随浏览器窗口变化，只与用户屏幕尺寸有关。 2、window window.innerHeight 浏览器窗口的视口的高度（包括滚动条）。 只读。 window.outerHeight 整个浏览器窗口的高度（包括地址栏啥的55667788）。 只读。 随着浏览器窗口变化。 不支持IE9及以
【JS中innerHeight/Width、clientHeight/Width和offsetHeight/Width使用及其详解】
Linxuejie_1030的博客
01-19 3821
JS中innerHeight/Width、clientHeight/Width、offsetHeight/Width属性详解
关于height、offsetheight、clientheight、scrollheight、innerheight、outerheight的区别一览
likeuzi的博客
02-09 439
https://www.cnblogs.com/layaling/p/6223372.html
clientHeight / offsetHeight / scrollHeight / Window.innerHeight
qq1722377628的博客
02-04 282
clientHeight: ① 元素的内部高度（包括padding,但不包括滚动条） ② 图示 ③ 获取:element.getBoundingClentRect() offsetHeight: ① 边框高度+内边距+内容高度+滚动高度 ②图示 ③ 获取：element.getBoundingClientRect() scrollHeight ① 是clientHeight+可滚动的内容部分（...
[DOM基础]offsetHeight,clientHeight,scrollHeight,innerHeight,outerHeight等属性的解释
06-07
这些属性都与元素的尺寸相关。 - `offsetHeight`：元素在垂直方向上占据的空间大小，包括元素的高度、上下边框...需要注意的是，`clientHeight`和`scrollHeight`还会受到CSS样式的影响，比如`box-sizing`属性的值。
深入理解clientHeight、offsetHeight、scrollHeight属性差异
在讨论前端开发时，经常需要获取和操作元素的高度信息，其中clientHeight、offsetHeight和scrollHeight是三种常用的属性，用于获取元素的高度相关的布局信息。这些属性在DOM操作中非常关键，尤其在进行页面布局调整...
body.offsetHeight
最新发布
04-06
let h = window.innerHeight; if (!w && typeof screen !== 'undefined') { // Fallback for older browsers. w = screen.width; h = screen.height; } return {width:w,height:h}; } console.log...
JS：screen/client/offset/scroll/inner/avail的width/left
u011587399的专栏
03-14 657
1、名词解释 screen：屏幕。这一类取到的是关于屏幕的宽度和距离，与浏览器无关，应该是获取window对象的属性。client：使用区、客户区。指的是客户区，当然是指浏览器区域。offset：偏移。指的是目标甲相对目标乙的距离。scroll：卷轴、卷动。指的是包含滚动条的的属性。inner：内部。指的是内部部分，不含滚动条。avail：可用的。可用区域，不含滚动条，易与inner混淆。
关于height、offsetheight、clientheight、scrollheight、innerheight、outerheight的区别
weixin_30266829的博客
03-29 545
二、也是平时经常用到的offsetheight 它返回的高度是内容高+padding+边框，但是注意哦，木有加margin哦，当然一般也木有啥需要把margin加进去的，以上代码为例，结果显示上图h2； 对了，为什么这个offsetheight的用法和height的用法不一样的，因为offsetHeight是js对象所能支持的方法，而$("")所获得的是一个jquery对象，他是不支持of...
简洁明了clientHeight、offsetHeight、scrollHeight、offsetTop、scrollTop、height、innerHeight、outerHeight
Damon99999的博客
04-29 633
每个HTML元素都具有clientHeight offsetHeight scrollHeight offsetTop scrollTop 这5个和元素高度、滚动、位置相关的属性，单凭单词很难搞清楚分别代表什么意思之间有什么区别。通过阅读它们的文档总结出规律如下： clientHeight和offsetHeight属性和元素的滚动、位置没有关系它代表元素的高度，其中： clientHeight：包...
clientHeight、offsetHeight、innerHeight、ouerHeight 区别
qq_40890601的博客
12-19 4478
innerHeight 和 outerHeight 是window 对象的只读属性， clientHeight 和 offsetHeight 是DOM 元素属性，接下来看看他们之间的有什么区别。 clientHeight vs offsetHeight Element.clientHeight 是元素的只读属性，对于没有定义CSS或者内联布局盒子的元素为0，否则，它是元素内部的高度(单位像素)，包含内边距，但不包括水平滚动条、边框和外边距 HTMLElement.offsetHeight 也是一个只读属性，
height、clientHeight、offsetHeight、scrollHeight、height()、 innerHeight()、outerHeight()等的区别...
weixin_34304013的博客
11-29 565
1.height height是css属性,这个属性定义元素内容区的高度，在内容区外面可以增加内边距、边框和外边距。 当 box-sizing: content-box 时,高度应用到元素的内容框。 当 box-sizing:border-box时,高度包含了内容框、内边距和边框。 2.clientHeight Element.clientHeight只读属性是没有的CS...
JavaScript---关于height/offsetHeight/clientHeight/innerHeight/outerHeight的区分说明
COCOLI_BK的博客
04-27 411
对应属性的说明height()为h1offsetheight()为h2clientHeight()为h3innerHeight()为h3outerHeight(options)为h2，options为true则包含上下margin 直接上图： height()为h1 它主要是返回元素的高度或者说这个div的内容的高度，它是jquery对像 offsetheight()为h2 它返回的高度是内容高+padding+边框，不包含margin值 clientHeight()为h3 clientHeight在页面
clientHeight、offsetHeight、scrollHeight三者区别与浏览器表现
Soochow_zhangyu的博客
11-26 1451
提要 clientHeight指客户区高度，本应该返回浏览器可见区域高度，但是，前面的元素如果不是documentElement，则返回盒子高度（包括填充和边框） offsetHeight指偏移之后的高度，offsetTop和offsetLeft分别指当前元素相对于父元素的偏移（也就是外边距），故offsetHeight则是指元素本身高度（包括填充和边框），不过，在IE11以下的版本，如果前缀元...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值