如何用JavaScript获得整个文档的高度？

在前端开发中，有时需要获取整个文档（包括滚动部分）的高度以进行页面布局或元素定位。本文将介绍如何使用JavaScript来获取文档的高度。

获取文档高度的方法

1. document.body.scrollHeight

document.body.scrollHeight属性返回整个文档的高度，包括可见区域和不可见区域。它的值是一个整数，单位为像素。以下是示例代码：

const docHeight = document.body.scrollHeight;
console.log(docHeight);

2. document.documentElement.scrollHeight

document.documentElement.scrollHeight属性返回整个文档的高度，不包括滚动条的高度。它的值是一个整数，单位为像素。以下是示例代码：

const docHeight = document.documentElement.scrollHeight;
console.log(docHeight);

3. window.innerHeight + window.scrollY

window.innerHeight属性返回浏览器窗口视口的高度， window.scrollY属性返回文档从顶部滚动的距离。这两个值相加可得到整个文档的高度。以下是示例代码：

const docHeight = window.innerHeight + window.scrollY;
console.log(docHeight);

注意事项

需要注意的是，以上三种方法都可以用来获取文档的高度，但它们的适用场景略有差异。如第一种方法在一些浏览器中可能无法正确返回文档的高度，因为HTML和BODY标签的高度并不总是相等的。第三种方法也有一些局限性，如果页面内容太多，会导致滚动条出现，进而获取到不正确的高度。

总结

通过以上三种方法，我们可以轻松地获取整个文档的高度。但需要根据实际情况灵活运用，选择适合自己的方法来获取文档高度。

参考示例代码：https://codepen.io/chatgpt/pen/ExNwYqz

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/8954