js如何获取网页高度

原创

ithorizon 8个月前 (09-01) 阅读数 104 #Javascript

在网页开发中，我们有时需要获取网页的整体高度，以进行某些动态效果的实现或是进行页面布局的调整。下面将介绍几种在JavaScript中获取网页高度的方法。

使用DOM的documentElement属性可以获取到<html>元素，然后通过clientHeight属性获取正文高度。


var clientHeight = document.documentElement.clientHeight;
console.log("网页的客户端高度（不包括滚动条）: " + clientHeight);

在大多数现代浏览器中，整个网页的高度（包括滚动条）可以通过以下对策获得：


var scrollHeight = document.documentElement.scrollHeight;
console.log("网页的整体高度（包括滚动条）: " + scrollHeight);

如果你想要获取用户可以滚动的高度（即内容超出视口的高度），可以使用以下代码：


var scrollHeight = document.documentElement.scrollHeight - document.documentElement.clientHeight;
console.log("网页的可滚动高度: " + scrollHeight);

有时候，你或许只需要知道当前窗口的视口（viewport）高度，无论是否有滚动条：


var viewportHeight = window.innerHeight;
console.log("视口的高度: " + viewportHeight);

获取网页高度的方法多种多样，采取你的具体需求可以选择适合的方法。一般来说，clientHeight和scrollHeight是最常用的两个属性来获取网页相关的高度信息。

文章标签： Javascript