使用原生 JavaScript 获取 div 高度
HTML <div> 元素由 HTML DOM 中的 Div 对象表示。使用 CSS 或 JavaScript 设置其他 HTML 元素的样式时，此标记用于指示这些元素的容器。HTML 中流内容的默认容器是 div 元素。它不会影响内容或布局，除非以某种方式进行 CSS 样式设置。div 元素的高度可以通过多种方式了解。本文讨论了这些方法。
使用 offsetHeight
offsetHeight 是一个属性，它返回元素的高度(以像素为单位)。
语法
offsetHeight 的语法如下所示。
divElement.offsetHeight
offsetHeight:是元素 CSS 高度(以像素为单位)的测量值，包括边框、填充和元素的水平滚动条(如果存在并呈现)。它不包括伪元素的高度，例如::before 或 ::after。
offsetHeight = 内部高度 + 填充 + 边框 + 滚动条高度
通过查看上图，我们可以说内部内容和填充、边框全部合并并称为偏移高度。
在此，我们包括滚动条和设计用于内容的任何示例，以便理解。
边距将被忽略并保持为整个主体的一部分，被视为偏移高度，同样，偏移宽度的计算方式与偏移高度相同。
例如，如果您有以下 HTML −
<div id="myDiv" height="400px"></div>
您可以使用以下方式获取高度 −
const height = document.querySelector('#myDiv').offsetHeight console.log(height)
这将给出输出 −
400
示例 1
以下是另一个示例，尝试使用 offsetHeight 检索 div 的高度 −
<!DOCTYPE html> <html> <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.location</title> <style> .b { width: 150px; height: 120px; background-color: green; display: inline-block; } </style> </head> <body> <h1> Tutorials Point </h1> <div class="b"></div> <p> div Height <span class="op"></span> </p> <button onclick="divHeight()"> Click </button> <script type="text/javascript"> function divHeight() { divElem = document.querySelector(".b"); elemHgt = divElem.offsetHeight; document.querySelector(".op").textContent = elemHgt + "px"; } </script> </body> </html>
执行上述程序时，它会显示一个框(div 元素)以及一个按钮单击。
单击按钮时，将显示 div 元素(框)的高度。
使用 clientHeight
clientHeight 是一个属性，它以像素为单位返回元素的高度。
clientHeight - 它包括元素的填充，但不包括其边框、边距或水平滚动条(如果存在)。它还可以包括伪元素的高度，例如 ::before 或 ::after。如果元素的内容无需垂直滚动条即可容纳，则其 scrollHeight 等于 clientHeight。
clientHeight = 内部高度 + 填充 + 滚动条高度
scrollHeight − scrollHeight 值等于元素在不使用垂直滚动条的情况下将所有内容放入视口所需的最小高度。
您可以使用 clientHeight 属性测量元素的内部高度，包括填充。但是，它将排除元素的边框、边距和滚动条高度。
现在谈到客户端高度，内部内容以及边框被视为客户端高度。我们知道，客户端高度不包括边框和边框上方的图层。
示例
以下示例创建一个 div 元素并使用 clientHeight 获取其高度 −
<!DOCTYPE html> <html> <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.location</title> <style> .b { width: 150px; height: 120px; background-color: green; display: inline-block; } </style> </head> <body> <h1>Tutorials Point</h1> <div class="b"></div> <p>div Height:<span class="op"></span></p> <button onclick="getHeight()"> Get Height </button> <script type="text/javascript"> function getHeight() { divElem = document.querySelector(".b"); elemHgt = divElem.clientHeight; document.querySelector(".op").textContent = elemHgt + "px"; } </script> </body> </html>
执行上述程序时，会显示一个框(div 元素)以及一个按钮单击。单击按钮时，将显示 div 元素(框)的高度。
