JS 获取 body 的高度|极客笔记

JS 获取 body 的高度

在前端开发中，有时我们需要获取页面元素的高度来实现一些特定的布局或交互效果。其中，获取 body 元素的高度是比较常见的操作之一。本文将介绍如何使用 JavaScript 获取 body 元素的高度，并解释一些相关的概念和技巧。

为什么需要获取 body 的高度

在 Web 开发中，获取 body 元素的高度通常用于动态调整页面布局或实现一些特定的交互效果。例如，我们可能需要根据页面内容的高度来动态设置某个元素的高度，或者根据页面的滚动位置来触发一些动画效果。总的来说，获取 body 元素的高度可以帮助我们更好地控制页面的外观和行为。

如何获取 body 的高度

使用 `document.body.offsetHeight`

document.body.offsetHeight 是一个常用的方法来获取 body 元素的高度。它返回的是 body 元素的整体高度，包括内边距和边框，但不包括外边距。下面是一个简单的示例代码：

const bodyHeight = document.body.offsetHeight;
console.log(bodyHeight);

在这段代码中，我们首先使用 document.body 来获取 body 元素，然后调用 offsetHeight 方法来获取其高度。最后，我们将结果输出到控制台。

使用 `document.body.clientHeight`

另一个常用的方法是使用 document.body.clientHeight。这个属性返回的是 body 元素的视口高度，即在不包括滚动条的情况下，body 元素在视口中的高度。下面是一个示例代码：

const bodyHeight = document.body.clientHeight;
console.log(bodyHeight);

注意事项

需要注意的是，以上两种方法在获取 body 高度时都不包括文档流之外的内容，比如外部边距、边框或滚动条。如果需要考虑这些因素，可以使用其他属性或方法来获取更精确的高度值。

此外，有时候页面的内容高度可能会超出 body 元素的高度，这时候可以结合 document.documentElement.scrollHeight 属性来获取整个文档的实际高度。

示例

下面我们来看一个完整的示例，演示如何获取 body 元素的高度并动态修改某个元素的高度：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Get Body Height</title>
<style>
  body {
    margin: 0;
    padding: 0;
    background-color: #f0f0f0;
  }
  .header {
    height: 50px;
    background-color: #333;
    color: white;
    text-align: center;
    line-height: 50px;
  }
  .content {
    width: 80%;
    margin: 20px auto;
    background-color: white;
    border: 1px solid #ccc;
    padding: 10px;
  }
</style>
</head>
<body>

<div class="header">Header</div>
<div class="content" id="content">Content</div>

<script>
  window.onload = function() {
    const bodyHeight = document.body.offsetHeight;
    const contentElement = document.getElementById('content');
    const adjustedHeight = bodyHeight - 50; // Subtract the header height
    contentElement.style.height = ` ${adjustedHeight}px`; console.log(`Body height:$ {bodyHeight}px`);
    console.log(`Content height: ${adjustedHeight}px`);
  };
</script>

</body>
</html>

在这个示例中，我们首先定义了一个具有固定高度的 header 元素和一个带有 ID 的内容元素。然后，在页面加载完成后，我们获取 body 的高度，并根据 header 的高度调整内容元素的高度，以确保内容充满整个页面。最后，我们将获取到的高度值打印到控制台，以便查看结果。