彻底搞懂clientHeight、offsetHeight、scrollHeight的区别

2024-06-13 03:41:22

我们开发web代码的时候,经常回遇到各种高度的计算. 因为总是忘记几者之间得区别,每次都要现查,这次通过这篇文章彻底搞明白这几个长度的区别.

1.定义说明

条目	含义	图示
clientHeight	元素的像素高度,包含元素的高度+内边距,不包含水平滚动条,边框和外边距
offsetHeight	元素的像素高度包含元素的垂直内边距和边框,水平滚动条的高度,且是一个整数
scrollHeight	元素内容的高度,包括溢出的不可见内容
offsetLeft	返回元素左上角相对于offsetParent的左边界的偏移像素值

注意点

1.对块级元素来说，offsetTop、offsetLeft、offsetWidth 及 offsetHeight 描述了元素相对于 offsetParent 的边界框。但是文本框不是如此.文本框的offsetLeft和offsetTop是第一个文本框的左偏移和上偏移.

2.offsetParent元素指改元素的定位元素以及最近的table,td,th,body.
可见,offsetParent和position属性的包含块概念类似.大部分场景下可以通用.

3.offsetTop和offsetLeft都是相对于其内边距边界的.

offsetLeft和left属性的区别

1.position为fixed时值不同
当position为fixed的时候,offsetLeft的值将会是null,而left此时一般有确定的数字值.
2.相对边距不同
offerset的是相对于offsetParent的内边距边界,left是相对于包含块的外边距边界.
3.包含块有区别
offerset相对与定位的祖先元素或者 table/td/th/body等祖先元素,left仅仅是相对于定位祖先元素+body

clientHeight与offsetHeight的区别

clientHeight仅仅包含内边距+高度,offsetHeight包含内边距+滚动条+边框
所以可以这样说: clientHeight+滚动条高度+边框 = offsetHeight

参考资料:

1.offsetHeight官方说明
https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLElement/offsetHeight

2.clientHeight官方说明
https://developer.mozilla.org/zh-CN/docs/Web/API/Element/clientHeight

彻底搞懂clientHeight、offsetHeight、scrollHeight的区别相关推荐

offsetHeight, clientHeight与scrollHeight的区别
[size=xx-large][color=indigo]offsetHeight, clientHeight与scrollHeight的区别[/color][/size] [size=large][ ...
clientHeight offsetHeight scrollHeight offsetTop scrollTop
文章目录各属性详解实现 offsetParent.offsetLeft/offsetTop深度剖析 element.offsetParent 定义祖先元素中不存在定位元素 webkit内核.Fi ...
一张图搞懂clientWidth,offsetWidth,scrollHeight
由于前端经常会遇到计算位置的问题,那么搞懂clientWidth,offsetWidth,scrollHeight等等这些就变得尤为重要.放上经典图,一张图让你搞懂clientWidth,offset ...
一篇搞懂OOA/OOD/OOP的区别
文章目录 OOA OOD OOP 总结相关文章: 一篇搞懂OOA/OOD/OOP的区别面向对象的基本原则-抽象,封装,继承,分解 GRASP模式概述面向对象的六大原则 OOA什么鬼,OOD又是什 ...
彻底搞懂BLDC与PMSM的区别
彻底搞懂BLDC与PMSM的区别从结构上看从控制上看从应用上看 BLDC,直流无刷电机,也可以叫电子换向直流电机,反电势为梯形波,定子电流为矩形波,一般定子为集中整距绕组. PMSM,永磁同步电 ...
一文带你彻底搞懂i++和++i的区别，谁的效率更高？
作者简介:Codebowl靓仔,学妹的工具人,C++开发误入数据开发,梦想30岁退休的靓仔就是我啦. i++和++i对于初学者来说,一直是一个特别容易搞混的内容,相信很多人现在也没有完全搞清(作者初学 ...
彻底搞懂a++和++a的区别
a++到底做了什么操作 a++是一组操作,它的过程是这样的(假设此时a的值为10): 获取到a的值,也就是10. 进行计算,也就是把获取到的值加一,得到计算后的结果,也就是11 把计算后的结果重新赋值 ...
clientHeight.offsetHeight.scrollHeight等的区别
查看了博文http://www.cnblogs.com/fullhouse/archive/2012/01/16/2324131.html 然后自己写一下加深印象. clientHeight:可见高度 ...
多图 | 搞懂volatile和synchronized的区别
点击上方蓝色"程序猿DD",选择"设为星标" 回复"资源"获取独家整理的学习资料! 来源 | 公众号「日拱一兵」之前写了几篇 Java并发 ...

最新文章

热门文章