JS获取div高度|极客笔记

JS获取div高度

在网页开发中，经常会遇到需要获取某个元素的高度的需求。特别是在实现一些交互效果或者响应式布局时，我们可能需要通过JavaScript来动态获取某个元素的高度，并根据这个高度来进行后续操作。在本文中，我们将详细讨论如何使用JavaScript来获取div元素的高度。

获取固定高度的div元素高度

首先，我们先来看一个简单的示例，假设我们有一个固定高度为200px的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>Get Div Height</title>
<style>
    .example {
        height: 200px;
        background-color: lightblue;
    }
</style>
</head>
<body>
<div class="example">This is a div with fixed height of 200px.</div>
</body>
</html>

接下来，我们使用JavaScript来获取这个div元素的高度，代码如下：

const divHeight = document.querySelector('.example').clientHeight;
console.log(divHeight);

以上代码中，我们使用document.querySelector('.example').clientHeight来获取到.example这个div元素的高度，并将其存储在变量divHeight中。最后我们通过console.log(divHeight)打印出这个高度值，在控制台中可以看到这个div元素的高度为200px。

获取可变高度的div元素高度

有时候我们的网页布局是响应式的，并不是所有的div元素都是固定高度的。那么如何处理可变高度的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>Get Div Height</title>
<style>
    .example {
        height: auto;
        background-color: lightblue;
        padding: 20px;
    }
</style>
</head>
<body>
<div class="example">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vitae placerat velit. Duis elementum purus vel justo condimentum, ut convallis purus ullamcorper. Quisque ut libero et turpis interdum feugiat.</p>
    <p>Nulla facilisi. Proin malesuada egestas erat, et ultricies elit dapibus vel. Phasellus lobortis semper ex, vel ultricies mi.</p>
</div>
</body>
</html>

在这个示例中，我们的div元素的高度是随内容变化的，而不是固定的200px。我们可以使用以下JavaScript代码来获取这个div元素的动态高度：

const divHeight = document.querySelector('.example').clientHeight;
console.log(divHeight);

同样的，我们通过document.querySelector('.example').clientHeight来获取.example这个div元素的高度，并把这个高度打印到控制台中。这就是如何获取可变高度的div元素高度。

结论

在本文中，我们详细讨论了如何使用JavaScript来获取固定高度和可变高度的div元素的高度。通过clientHeight属性，我们可以轻松地获取到元素的高度，并进行后续的操作和计算。

JS获取div高度