如何获得元素的渲染高度？

要获取元素的渲染高度，可以使用 JavaScript 中的 offsetHeight 属性。offsetHeight 属性返回一个元素的布局高度，包括元素的高度、内边距和边框，但不包括外边距和滚动条。

以下是一个简单的示例，展示了如何获取元素的渲染高度：

<!DOCTYPE html>
<html>
<head>
 <style>
    #myElement {
      width: 200px;
      height: 100px;
      padding: 10px;
      border: 5px solid black;
      margin: 20px;
    }
  </style>
</head>
<body>
  <div id="myElement">Hello World</div>
 <button onclick="getHeight()">获取高度</button>
  <p id="heightDisplay"></p>

 <script>
    function getHeight() {
      const element = document.getElementById('myElement');
      const height = element.offsetHeight;
      document.getElementById('heightDisplay').innerHTML = `元素的渲染高度为：${height} 像素`;
    }
  </script>
</body>
</html>

在这个示例中，我们创建了一个带有样式的 div 元素，并在页面上添加了一个按钮。当用户点击按钮时，我们使用 getElementById 方法获取元素，并使用 offsetHeight 属性获取元素的渲染高度。然后，我们将高度显示在页面上的一个段落元素中。

需要注意的是，offsetHeight 属性返回的值是整数，表示元素的高度（以像素为单位）。如果元素的显示样式为 none，则 offsetHeight 返回值为 0。此外，offsetHeight 属性是只读的，不能设置。