16-简单理解offsetHeight与clientHeight的区别
笔记+分享
在前端开发中，掌握DOM元素的尺寸和位置是非常重要的。其中，offsetHeight 和 clientHeight 是两个常用的属性，但它们的含义和使用场景有所不同。本文将深入探讨这两个属性的区别和应用。
什么是offsetHeight？
offsetHeight 是一个只读属性，它表示元素的总高度，包括元素的边框(border)、内边距(padding)和水平滚动条的高度（如果存在）。具体而言，offsetHeight 等于元素的内容高度(content height) 加上内边距、边框和水平滚动条的高度。
var element = document.getElementById('myElement');
console.log(element.offsetHeight);
什么是clientHeight？
clientHeight 也是一个只读属性，它表示元素的内部高度，包括内边距(padding)，但不包括边框(border)和水平滚动条的高度（如果存在）。具体而言，clientHeight 等于元素的内容高度(content height) 加上内边距的高度。
var element = document.getElementById('myElement');
console.log(element.clientHeight);
主要区别
-
包含的部分不同：
offsetHeight包含内容高度、内边距、高度边框和水平滚动条的高度。clientHeight只包含内容高度和内边距，不包含边框和滚动条的高度。
-
应用场景不同：
- 使用
offsetHeight可以获取元素的完整高度，包括所有的边框和滚动条，这在需要考虑所有视觉元素的场景中很有用。 - 使用
clientHeight可以获取元素的实际内容高度和内边距，这在需要精确控制内容区域大小的场景中很有用。
- 使用
-
滚动条的影响：
- 当元素具有滚动条时，
offsetHeight会包含滚动条的高度，而clientHeight不会。
- 当元素具有滚动条时，
实例对比
假设我们有以下HTML结构：
<div id="myElement" style="height: 100px; padding: 10px; border: 5px solid black; overflow: scroll;">
<p>这是一个测试元素。</p>
</div>
var element = document.getElementById('myElement');
console.log('offsetHeight:', element.offsetHeight); // 输出：130 (100内容高度 + 20内边距 + 10边框)
console.log('clientHeight:', element.clientHeight); // 输出：100 (100内容高度 + 20内边距 - 20滚动条)
在这个例子中，offsetHeight 包含了边框和滚动条的高度，而 clientHeight 仅包含内容和内边距的高度。
结论
offsetHeight 和 clientHeight 是获取DOM元素高度的重要属性，但它们在具体使用中有不同的侧重点。了解它们之间的区别可以帮助开发者更准确地控制和布局页面元素，从而创建更精致和精确的用户界面。
原文地址：https://blog.csdn.net/weixin_46002095/article/details/143817915
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！