在 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 高度。
Sahil is a full-stack developer who loves to build software. He likes to share his knowledge by writing technical articles and helping clients by working with them as freelance software engineer and technical writer on Upwork.
LinkedIn