在前端开发中，有时需要获取整个文档（包括滚动部分）的高度以进行页面布局或元素定位。本文将介绍如何使用JavaScript来获取文档的高度。
获取文档高度的方法
1. document.body.scrollHeight
document.body.scrollHeight属性返回整个文档的高度，包括可见区域和不可见区域。它的值是一个整数，单位为像素。以下是示例代码：
----- --------- - --------------------------- -----------------------
2. document.documentElement.scrollHeight
document.documentElement.scrollHeight属性返回整个文档的高度，不包括滚动条的高度。它的值是一个整数，单位为像素。以下是示例代码：
----- --------- - -------------------------------------- -----------------------
3. window.innerHeight + window.scrollY
window.innerHeight属性返回浏览器窗口视口的高度， window.scrollY属性返回文档从顶部滚动的距离。这两个值相加可得到整个文档的高度。以下是示例代码：
----- --------- - ------------------ - --------------- -----------------------
注意事项
需要注意的是，以上三种方法都可以用来获取文档的高度，但它们的适用场景略有差异。如第一种方法在一些浏览器中可能无法正确返回文档的高度，因为HTML和BODY标签的高度并不总是相等的。第三种方法也有一些局限性，如果页面内容太多，会导致滚动条出现，进而获取到不正确的高度。
总结
通过以上三种方法，我们可以轻松地获取整个文档的高度。但需要根据实际情况灵活运用，选择适合自己的方法来获取文档高度。
参考示例代码：https://codepen.io/chatgpt/pen/ExNwYqz
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/8954