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

在JavaScript中，有几种方法可以获取HTML元素的高度。以下是一些常用的方法：

1. offsetHeight

offsetHeight 是一个只读属性，返回元素在垂直方向上的高度，包括元素的 padding（但不包括元素的 border、margin 和 水平滚动条 的高度）。如果元素的 box-sizing 属性为 border-box，那么 offsetHeight 还包括元素的 border。

const element = document.getElementById('myElement');
const height = element.offsetHeight;

2. clientHeight

clientHeight 是一个只读属性，返回元素的内部高度（以像素为单位），包括 padding，但不包括 border、margin 和水平滚动条。如果元素设置了 overflow: auto 或 overflow: scroll 并且内容被裁剪，clientHeight 将返回视口的高度。

const element = document.getElementById('myElement');
const height = element.clientHeight;

3. getBoundingClientRect()

getBoundingClientRect() 方法返回一个 DOMRect 对象，该对象提供了元素的大小及其相对于视口的位置。height 属性表示元素的高度，包括 padding 和 border，但不包括 margin。

const element = document.getElementById('myElement');
const rect = element.getBoundingClientRect();
const height = rect.height;

请注意，getBoundingClientRect() 返回的是相对于视口的位置和大小，而不是相对于文档的。

4. style.height

style.height 可以获取或设置元素的内联样式（在HTML元素的style属性中定义的）中的 height 值。但请注意，它只能返回以像素（px）为单位的内联样式值，并且如果元素的高度是通过CSS类或其他方式（如百分比、em、rem等）设置的，那么 style.height 将返回空字符串。

const element = document.getElementById('myElement');
const height = window.getComputedStyle(element).getPropertyValue('height');
// 注意：这将返回一个包含单位的字符串（如 "100px"），而不是数字

为了得到不带单位的数值，你可能需要使用正则表达式或字符串操作函数来解析这个值。

5. computedStyle.height

通过 window.getComputedStyle() 方法，你可以获取元素的所有最终使用的CSS属性值，包括那些被浏览器计算后的值（例如，百分比转换为像素）。然后，你可以使用 getPropertyValue() 方法来获取具体的 height 值。

const element = document.getElementById('myElement');
const computedStyle = window.getComputedStyle(element);
const height = parseFloat(computedStyle.getPropertyValue('height').replace('px', ''));
// 注意：这里我们假设了高度是以像素为单位的，并且移除了单位

6. jQuery 方法

如果你在使用jQuery，你可以使用 .height() 方法来获取元素的高度。这个方法考虑了 padding，但不包括 border、margin 和水平滚动条。

const height = $('#myElement').height();