偏移、滚动和客户端之间的区别

在Web开发中，我们经常会遇到 offsetHeight、scrollHeight 和 clientHeight 这些属性，它们都是用来获取元素尺寸的，但是它们之间的差异是什么呢？我们该如何正确使用这些属性呢？

• offsetHeight

offsetHeight 是元素的总高度，包括内边距（padding）和边框（border）。

<div style="width: 100px; height: 100px; padding: 10px; border: 1px solid black;">
  Hello World!
</div>

这个 div 元素的 offsetHeight 为 122px，其中 100px 是元素的高度，10px 是内边距，2px 是边框。

• scrollHeight

scrollHeight 是元素的滚动高度，包括元素的内容和内边距，但不包括边框。

<div style="width: 100px; height: 100px; padding: 10px; border: 1px solid black; overflow-y: scroll;">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eget lacus eget nunc luctus rutrum. Maecenas eget lacus eget nunc luctus rutrum. Maecenas eget lacus eget nunc luctus rutrum.</p>
</div>

这个 div 元素的 scrollHeight 为 202px，其中 100px 是元素的高度，10px 是内边距，92px 是元素的内容。

• clientHeight

clientHeight 是元素的客户区高度，包括内边距，但不包括边框和滚动条。

<div style="width: 100px; height: 100px; padding: 10px; border: 1px solid black; overflow-y: scroll;">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eget lacus eget nunc luctus rutrum. Maecenas eget lacus eget nunc luctus rutrum. Maecenas eget lacus eget nunc luctus rutrum.</p>
</div>

这个 div 元素的 clientHeight 为 110px，其中 100px 是元素的高度，10px 是内边距。

知道了这些属性的差异，我们就可以正确地使用它们来获取元素的尺寸。

例如，如果我们要获取一个元素的总高度，我们可以使用 offsetHeight 属性。

const element = document.getElementById('my-element');
const height = element.offsetHeight;

如果我们要获取一个元素的滚动高度，我们可以使用 scrollHeight 属性。

const element = document.getElementById('my-element');
const height = element.scrollHeight;

如果我们要获取一个元素的客户区高度，我们可以使用 clientHeight 属性。

const element = document.getElementById('my-element');
const height = element.clientHeight;

希望这篇文章能帮助你理解 offsetHeight、scrollHeight 和 clientHeight 这些属性之间的差异。