HOWTO · JavaScript
在 JavaScript 中获取 div 元素的高度
本教程介绍了如何在 JavaScript 中获取 div 元素的高度。
本页内容
在 HTML 中，你通过使用 CSS 样式表或使用 JavaScript 为元素提供的任何 CSS 属性都在文档对象模型 (DOM) 中设置。通过此 DOM，你可以稍后在 JavaScript 代码中轻松访问这些值。有多种方法可以在 JavaScript 中获取 CSS 属性的值。本文将介绍如何从我们的 JavaScript 代码中获取 CSS 属性 height。
下面是我们创建的 HTML 文档。在里面，我们有一个 body 标签，它只包含一个 div 元素，其 id 为 container。在 head 标签中，我们为 div 元素提供了一些基本样式，如宽度、高度、边框、填充等。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#container{
width: 100px;
height: 50px;
border: 1px solid red;
padding: 4px;
background-color: cadetblue;
}
</style>
</head>
<body>
<div id="container"></div>
<script></script>
</body>
</html>
输出：
如果你运行上面的 HTML 文档，你将在浏览器窗口中看到一个像这样的矩形。
现在我们已经设置好了一切，让我们在这个 container div 元素上应用各种属性来获取它的高度。我们将要编写的代码将位于 body 标签内的 <script></script> 标签内。
在 JavaScript 中获取 div 元素高度的各种方法
首先，我们将使用 getElementById() 方法从 HTML DOM 中获取 container 元素的引用。然后我们将该元素存储在 JavaScript 中的 element 变量中。
let element = document.getElementById('container');
现在我们有了 div 元素，让我们使用 JavaScript 使用各种属性获取 div 的高度。
1. 客户端高度
clientHeight 返回元素的高度，包括作为整数值的填充。
console.log(element.clientHeight);
输出：
58
由于我们在计算高度时为容器的所有四个边添加了 4px 的填充，当前为 50px，因此 4px 顶部和 4px 底部的填充，即 8px 的总填充将被添加到高度。这将导致总高度为 58px。
2. 偏移高度
offsetHeight 由元素的高度组成，其中还包括任何填充、边框和水平滚动条（如果存在）。
console.log(element.offsetHeight);
输出：
60
与 clientHeight 属性类似，offsetHeight 属性也将采用 8px 填充，内容的高度为 50px，边框宽度为 1px 顶部和 1px 底部，总共 2px .因此，此属性返回的总高度将为 8 + 50 + 2，即 60px。
3. scrollHeight
scrollHeight 返回内容的高度，包括由于溢出而在屏幕上不可见的内容。它只包括元素的内边距，而不包括边框、边距或水平滚动条。
scrollHeight 类似于 clientHeight。clientHeight 和 scrollHeight 之间的唯一区别是 scrollheight 还可以包括内容的高度，由于溢出，当前在屏幕上不可见。
console.log(element.scrollHeight);
输出：
58
内容的高度为 50px，总内边距为 8px。因此，scrollHeight 属性返回的总高度为 58px。
4. getBoundingClientRect()
getBoundingClientRect() 方法返回一个对象，该对象包含与元素的宽度和高度及其相对于视口的位置（x、y、顶部、左侧等）相关的信息。此方法计算的高度还包含填充和边框。
console.log(element.getBoundingClientRect().height);
输出：
60
因此，要从 getBoundingClientRect() 方法返回的对象中获取元素的高度，我们必须使用 height 键来获取高度。此处，元素高度为 50px，内边距为 8px，边框宽度为 2px。因此，此函数将返回总 60px 高度。
