JS-元素大小深入学习-offset、client、scroll等学习研究笔记
一些属性和方法，在dom中没有规定如何确定页面中元素大小的情况下诞生。。。
1.偏移量（offset dimension）
测试代码：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>offset偏移量学习</title> 6 <meta name="author" content="郭菊锋/702004176@qq.com"/> 7 <style type="text/css"> 8 #a{ 9 height: 300px;width: 300px; 10 border: 1px solid red; 11 -webkit-box-sizing: border-box; 12 -moz-box-sizing: border-box; 13 box-sizing: border-box; 14 padding: 10px 0; 15 margin: 10px 0; 16 overflow: scroll; 17 } 18 #a p{height: 450px;} 19 </style> 20 </head> 21 <body> 22 <div id="a" style=""> 23 <p></p> 24 </div> 25 </body> 26 </html>
js代码：
1 <script type="text/javascript"> 2 var a= document.getElementById('a'); 3 console.log(a.offsetHeight); 4 console.log(a.clientHeight); 5 </script>
获取理论结果：
//offsetWidth 包括padding和border，不包括滚动条，滚动条是默认在宽度中的。
几种情况——
//加了boxsizing的情况： offsetWidth值 = style的宽度值,
//不加boxsizing的情况 : offsetWidth值 = style中的宽度 + padding左右值 + border左右值。
//有无滚动条不受影响
//height同理
以上理论，经测在谷歌和火狐中都适用。
offsetLeft 和 offsetTop
offsetLeft/offsetHeight是元素的左边框/上边框到其最近的、具有大小的元素左边框/上边框的距离。
具体值还是取决于他的offsetParent。
心中有个概念，但是最终解释还是看不同情况下的结果：
2.客户区大小（client dimension）
指的是元素内容及其内边距所占据的空间大小，从字面上看，客户区大小就是元素内部的空间大小，因此滚动条占用的空间不计算在内【js高级程序设计文摘】
测试offsetWidth顺便测试的clientWidth的
clientWidth 永远会减去滚动条的尺寸和border的尺寸，只包括内容和padding的。!! 即使加了box-sizing=border-box也不包括border，
几种情况——
//加了box-sizing: clientWidth值就是 = style中的宽度 - border宽度，
//不加box-sizing: clientWidth值就是 = style中的宽度 + padding左右值。
//有滚动条情况：clientWidth值 = （style中的宽度 + padding左右值）- 17px（滚动条的宽度值）；
//滚动条加box-sizing情况: clientWidth值 = style中的宽度 - 17px（滚动条的宽度值）- border的左右宽度值
//height同理
以上理论，经测在谷歌和火狐中都适用。
3.scrollHeight（client dimension）
scrollHeight返回元素的完整的高度,以像素为单位
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语，封装的思维：从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热？
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
· 周边上新：园子的第一款马克杯温暖上架
· Open-Sora 2.0 重磅开源！
· 分享 3 个 .NET 开源的文件压缩处理库，助力快速实现文件压缩解压功能！
· Ollama——大语言模型本地部署的极速利器
· DeepSeek如何颠覆传统软件测试？测试工程师会被淘汰吗？