使用js获取页面的各种高度

以下是详细讲解“使用JavaScript获取页面的各种高度”的完整攻略，过程中至少包含两条示例说明的标准Markdown格式文本：

使用JavaScript获取页面的各种高度

在Web开发中，经需要获取页面的各种高度，例如文档高度、窗口高度、元素高度等。本文将介绍如何使用JavaScript获取页面各种高度。

获取文档高度

文档高度指的是整个HTML文档的高度，可以通过以下代码获取：

const docHeight = Math.max(
  document.body.scrollHeight,
  document.documentElement.scrollHeight,
  document.body.offsetHeight,
  document.documentElement.offsetHeight,
  document.body.clientHeight,
  document.documentElement.clientHeight
);

在上面的示例中，我们使用Math.max()函数获取文档高度，该函数会返回参数中的最大值。

获取窗口高度

窗口高度指的是浏览器窗口的高度，可以通过以下代码获取：

const windowHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;

在上面的示例中，我们使用window.innerHeight属性获取窗口高度，如果该属性不可用，则使用document.documentElement.clientHeight或document.body.clientHeight属性。

获取元素高度

元素高度指的是指定元素的高度，可以通过以下代码获取：

const elementHeight = document.getElementById("-id").offsetHeight;

在上面的示例中，我们使用document.getElementById()函数获取指定元素的高度，该函数会返回元素的offsetHeight属性。

总结

以上是使用JavaScript获取页面的各种高度的完整攻略。在实际应用中，需要注意不同浏览器的兼容性问题以及元素的盒模型（box model）对高度的影响。