js如何获取元素的高度的几种方式

在 JavaScript 中，你可以使用多种方法来获取元素的高度。以下是一些常见的方法：

1. 使用 offsetHeight 属性：
   offsetHeight 属性返回元素的像素高度，包括元素的边框、内边距和水平滚动条（如果存在）。

   const element = document.getElementById("myElement");
   const height = element.offsetHeight;
   console.log(height);
   

2. 使用 clientHeight 属性：
   clientHeight 属性返回元素的内部高度（以像素为单位），包括内边距，但不包括边框、滚动条和外边距。

   const element = document.getElementById("myElement");
   const height = element.clientHeight;
   console.log(height);
   

3. 使用 getBoundingClientRect 方法：
   getBoundingClientRect 方法返回一个 DOMRect 对象，该对象包含元素的大小及其相对于视口的位置。

   const element = document.getElementById("myElement");
   const rect = element.getBoundingClientRect();
   const height = rect.height;
   console.log(height);
   

4. 使用 style 属性：
   如果你需要获取元素的高度样式值（不包括内边距、边框和外边距），可以使用 style 属性。

   const element = document.getElementById("myElement");
   const height = element.style.height;
   console.log(height); // 返回的值是一个字符串，例如 "100px"
   

请注意，offsetHeight 和 clientHeight 返回的是整数，而 getBoundingClientRect 返回的是浮点数。另外，style.height 返回的是一个字符串，包含单位（例如 "px"）。

选择哪种方法取决于你的具体需求。如果你需要获取元素的实际渲染高度，offsetHeight 或 clientHeight 是更好的选择。如果你需要获取元素的位置和大小信息，getBoundingClientRect 是更好的选择。如果你只需要获取元素的高度样式值，style.height 是最简单的方法。