在 JavaScript 中获取 div 元素的高度

当前位置：主页 > 学无止境 > WEB前端 > JavaScript >

Vue React JavaScript Angular CSS HTML

在 JavaScript 中获取 div 元素的高度

作者：迹忆客最近更新：2023/03/10 浏览次数：

在 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>

输出：

在 JavaScript 中获取 div 元素高度

如果你运行上面的 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);

输出：

由于我们在计算高度时为容器的所有四个边添加了 4px 的填充，当前为 50px，因此 4px 顶部和 4px 底部的填充，即 8px 的总填充将被添加到高度。这将导致总高度为 58px。

2. `偏移高度`

offsetHeight 由元素的高度组成，其中还包括任何填充、边框和水平滚动条（如果存在）。

console.log(element.offsetHeight);

输出：

与 clientHeight 属性类似，offsetHeight 属性也将采用 8px 填充，内容的高度为 50px，边框宽度为 1px 顶部和 1px 底部，总共 2px .因此，此属性返回的总高度将为 8 + 50 + 2，即 60px。

3. `scrollHeight`

scrollHeight 返回内容的高度，包括由于溢出而在屏幕上不可见的内容。它只包括元素的内边距，而不包括边框、边距或水平滚动条。

scrollHeight 类似于 clientHeight。clientHeight 和 scrollHeight 之间的唯一区别是 scrollheight 还可以包括内容的高度，由于溢出，当前在屏幕上不可见。

console.log(element.scrollHeight);

输出：

内容的高度为 50px，总内边距为 8px。因此，scrollHeight 属性返回的总高度为 58px。

4. `getBoundingClientRect()`

getBoundingClientRect() 方法返回一个对象，该对象包含与元素的宽度和高度及其相对于视口的位置（x、y、顶部、左侧等）相关的信息。此方法计算的高度还包含填充和边框。

console.log(element.getBoundingClientRect().height);

输出：

因此，要从 getBoundingClientRect() 方法返回的对象中获取元素的高度，我们必须使用 height 键来获取高度。此处，元素高度为 50px，内边距为 8px，边框宽度为 2px。因此，此函数将返回总 60px 高度。

上一篇：在 JavaScript 中向元素添加文本

下一篇：如何在 JavaScript 中过滤对象

转载请发邮件至 1244347461@qq.com 进行申请，经作者同意之后，转载请以链接形式注明出处

本文地址：

迹忆客专注技术分享