js怎么获取页面高度

在JavaScript中，获取页面的高度是一个常见的任务，这在实现滚动条、响应式设计或者页面布局时非常有用。下面我们将介绍两种首要的方法来获取页面的高度。

### 方法一：使用window对象的scrollHeight属性

```html

获取窗口滚动区域的高度

首先，你可以通过`window`对象的`scrollHeight`属性获取整个窗口（包括滚动条）的高度。以下是怎样实现的：

var pageHeight = window.scrollHeight;
console.log("页面高度:", pageHeight);

这个值包括了滚动条的高度，如果你只想获取可视区域的高度，可以使用`innerHeight`属性：

```html

获取可视区域的高度

如果需要获取可视区域的高度，即不包括滚动条的部分，可以使用`window.innerHeight`：

var visibleHeight = window.innerHeight;
console.log("可视区高度:", visibleHeight);

### 方法二：使用document对象的height属性

```html

获取整个文档（包括所有元素）的高度

如果你想获取整个页面的内容区域，包括所有嵌套的元素，可以使用`document`对象的`height`属性：

var docHeight = document.documentElement.offsetHeight; // 对于现代浏览器
// 或者
var docHeight = document.body.scrollHeight; // 对于IE6-8
console.log("文档高度:", docHeight);

这里需要注意的是，`documentElement.offsetHeight`获取的是HTML元素的总高度，包括内联元素的行高。而`body.scrollHeight`则只计算块级元素和行内块级元素的高度。

以上就是JavaScript获取页面高度的两种常见方法，选择你的需求选择合适的方法即可。

本文由IT视界版权所有,禁止未经同意的情况下转发