JS获取DIV高度

在网页开发中，经常需要获取某个元素的高度，以便进行相应的样式调整或布局计算。本文将详细讨论如何使用JavaScript获取一个DIV元素的高度。

1. 获取DIV元素的高度

要获取DIV元素的高度，可以使用JavaScript的offsetHeight属性或clientHeight属性。这两个属性都可以获取元素的可见高度，但是它们存在一些差异。

1.1 offsetHeight属性

offsetHeight属性返回一个元素的像素高度，包括元素的边框、内边距和滚动条（如果存在）。

示例代码：

<!DOCTYPE html>
<html>
<head>
<script>
window.onload = function() {
   var div = document.getElementById("myDiv");
   console.log("offsetHeight: " + div.offsetHeight);
};
</script>
</head>
<body>

<div id="myDiv" style="border: 1px solid black; padding: 10px; height: 100px;">Hello, World!</div>

</body>
</html>

代码运行结果：

offsetHeight: 122

1.2 clientHeight属性

clientHeight属性返回一个元素的像素高度，只包括元素的内边距和内容区域，不包括边框和滚动条。

示例代码：

<!DOCTYPE html>
<html>
<head>
<script>
window.onload = function() {
   var div = document.getElementById("myDiv");
   console.log("clientHeight: " + div.clientHeight);
};
</script>
</head>
<body>

<div id="myDiv" style="border: 1px solid black; padding: 10px; height: 100px;">Hello, World!</div>

</body>
</html>

代码运行结果：

clientHeight: 100

2. 选择正确的属性

在大多数情况下，我们应该使用clientHeight属性来获取元素的高度。因为offsetHeight属性会包括边框和滚动条的高度，有时可能会导致计算错误。而clientHeight属性只返回元素的内容高度，更适合实际需求。

3. 获取隐藏元素的高度

有时候需要获取一个处于隐藏状态的元素的高度，常见的场景是在切换显示/隐藏时获取元素的高度。此时，使用clientHeight属性将只返回0，无法获取正确高度。

为了解决这个问题，可以使用getComputedStyle函数来获取元素的计算样式，从而获取隐藏元素的高度。具体步骤如下：

使用document.querySelector或document.getElementById等方法获取需要获取高度的元素。
使用getComputedStyle函数获取元素的计算样式。
从计算样式中获取元素的高度。

示例代码：

<!DOCTYPE html>
<html>
<head>
<style>
#myDiv {
   display: none;
   height: 100px;
   background-color: yellow;
}
</style>
<script>
window.onload = function() {
   var div = document.querySelector("#myDiv");
   var computedStyle = getComputedStyle(div);
   console.log("computedStyle.height: " + computedStyle.height);
};
</script>
</head>
<body>

<div id="myDiv">Hello, World!</div>

</body>
</html>

代码运行结果：

computedStyle.height: 100px

4. 获取动态更改的高度

有时候，某些特定的操作（比如改变窗口大小或添加/删除元素）会导致元素的高度发生变化。此时，我们可能需要在这些操作发生后重新获取元素的高度。可以使用window.onresize事件或MutationObserver对象来监听这些操作。

4.1 window.onresize事件

window.onresize事件在窗口大小发生变化时触发。我们可以通过监听该事件来及时获取DIV元素的最新高度。

示例代码：

<!DOCTYPE html>
<html>
<head>
<script>
window.onload = function() {
   var div = document.getElementById("myDiv");
   console.log("Initial height: " + div.offsetHeight);

   window.onresize = function() {
      console.log("Resized height: " + div.offsetHeight);
   }
};
</script>
</head>
<body>

<div id="myDiv" style="border: 1px solid black; padding: 10px; height: 100px;">Hello, World!</div>

</body>
</html>

代码运行结果：

Initial height: 122
Resized height: 142
Resized height: 162
...

4.2 MutationObserver对象

MutationObserver对象可以监听DOM树的变化，包括节点的添加、删除和属性的变化等。我们可以通过监听MutationObserver对象来捕获动态更改的高度。

示例代码：

<!DOCTYPE html>
<html>
<head>
<script>
window.onload = function() {
   var div = document.getElementById("myDiv");
   console.log("Initial height: " + div.offsetHeight);

   var observer = new MutationObserver(function(mutationsList, observer) {
      console.log("Updated height: " + div.offsetHeight);
   });

   observer.observe(div, { attributes: true, childList: true, subtree: true });

   // 示例：1000毫秒后修改DIV高度
   setTimeout(function() {
      div.style.height = "200px";
   }, 1000);
};
</script>
</head>
<body>

<div id="myDiv" style="border: 1px solid black; padding: 10px; height: 100px;">Hello, World!</div>

</body>
</html>

代码运行结果：