js获取div高度|极客笔记

js获取div高度

在Web开发中，经常需要获取元素的高度来进行布局或样式的调整。特别是在响应式设计中，根据不同设备的高度来动态调整元素的尺寸是非常常见的需求。本文将详细介绍如何使用JavaScript来获取一个div元素的高度，并给出相应的代码示例。

方法一：clientHeight属性

每个HTML元素都有一组属性，用于描述其在页面中的尺寸和位置。其中，clientHeight属性表示元素的内部高度，不包括边框和外边距。通过这个属性，我们可以轻松地获取一个div元素的高度。

<!DOCTYPE html>
<html>
<head>
  <title>获取div高度示例</title>
</head>
<body>
  <div id="myDiv" style="height: 200px; background-color: #f0f0f0;">
    这是一个示例div元素
  </div>

  <script>
    var myDiv = document.getElementById("myDiv");
    var height = myDiv.clientHeight;
    console.log("div的高度为：" + height + "px");
  </script>
</body>
</html>

上面的代码示例中，我们首先定义了一个包含内容的div元素，并设置了其高度为200px。然后通过JavaScript中的document对象和getElementById方法获取到这个div元素，并使用clientHeight属性获取其高度。最后，将获取到的高度打印到控制台中。

在浏览器中打开这个HTML文件，可以看到控制台输出了div元素的高度为200px。

方法二：offsetHeight属性

除了clientHeight属性外，还有一个offsetHeight属性用于获取元素的高度。offsetHeight包括元素的内部高度、边框和外边距的尺寸。使用offsetHeight属性也可以获取一个div元素的高度。

<!DOCTYPE html>
<html>
<head>
  <title>获取div高度示例</title>
</head>
<body>
  <div id="myDiv" style="height: 200px; background-color: #f0f0f0;">
    这是一个示例div元素
  </div>

  <script>
    var myDiv = document.getElementById("myDiv");
    var height = myDiv.offsetHeight;
    console.log("div的高度为：" + height + "px");
  </script>
</body>
</html>

这段代码与上一段代码类似，只是将获取高度的属性由clientHeight改为了offsetHeight。在控制台中输出的高度依旧是200px。

方法三：getComputedStyle方法

如果一个元素的高度是通过CSS样式表来设置的，那么使用getComputedStyle方法可以获取到最终应用在这个元素上的样式，包括高度。

<!DOCTYPE html>
<html>
<head>
  <title>获取div高度示例</title>
  <style>
    #myDiv {
      height: 200px;
      background-color: #f0f0f0;
    }
  </style>
</head>
<body>
  <div id="myDiv">
    这是一个示例div元素
  </div>

  <script>
    var myDiv = document.getElementById("myDiv");
    var style = window.getComputedStyle(myDiv);
    var height = style.getPropertyValue("height");
    console.log("div的高度为：" + height);
  </script>
</body>
</html>

在这个示例中，我们在CSS样式表中设置了div元素的高度为200px。然后使用getComputedStyle方法获取这个元素应用的最终样式，通过getPropertyValue方法获取高度值。最终输出的高度依然是200px。