极客笔记js 获取页面高度
在网页开发中，有时我们需要获取页面的高度信息以便进行一些操作，比如调整元素的位置或大小，或者判断页面滚动的位置等。本文将详细介绍如何使用JavaScript获取页面的高度信息。
方法一：使用document对象获取页面高度
我们可以通过document对象来获取页面的高度信息。具体方法是通过document的属性body来获取页面的body元素，然后再通过body元素的属性scrollHeight来获取完整的页面高度，即页面内容的高度加上不可见的高度（如果有滚动条的话）。
const bodyHeight = document.body.scrollHeight;
console.log("页面高度：", bodyHeight);
上面的代码片段将打印出当前页面的高度信息，单位是像素。需要注意的是，有时候页面的内容很少或者内容撑开了页面高度，可能无法触发滚动条，这时获取的高度可能并不是实际浏览器窗口的高度。
方法二：使用window对象获取视口高度
除了获取页面内容的高度，我们还可以获取浏览器窗口视口（viewport）的高度，即用户能看到的可视区域的高度。这可以通过window对象的innerHeight属性来实现。
const viewportHeight = window.innerHeight;
console.log("浏览器窗口视口高度：", viewportHeight);
以上代码会输出当前浏览器窗口视口的高度信息。需要注意的是，浏览器窗口的高度是会随着浏览器窗口大小的改变而改变的，因此在某些情况下，页面高度可能会不准确，建议实时获取。
方法三：结合两种方法获取页面高度
有时候，我们需要获取的是页面的实际高度，即用户能看到的内容的高度，此时可以将两种方法结合起来，取两者的最大值作为页面的高度信息。
const bodyHeight = document.body.scrollHeight;
const viewportHeight = window.innerHeight;
const pageHeight = Math.max(bodyHeight, viewportHeight);
console.log("页面实际高度：", pageHeight);
上述代码将计算出页面的实际高度，并输出。
综上所述，我们可以通过JavaScript来获取页面的高度信息，可以根据实际情况选择不同的方法来获取页面的高度信息，以便进行相应的操作。