js 获取div的高度

// 获取div的高度示例代码

// 假设我们有一个HTML结构如下：
// <div id="myDiv">这是一个测试的div</div>

// 方法1: 使用offsetHeight属性
// offsetHeight返回元素的高度，包括padding，但不包括margin、border
var div = document.getElementById("myDiv");
var height = div.offsetHeight;
console.log("div的高度（包括padding）是：" + height + "px");

// 方法2: 使用getBoundingClientRect方法
// getBoundingClientRect返回一个DOMRect对象，包含元素的大小及其相对于视口的位置
var rect = div.getBoundingClientRect();
var heightWithBorder = rect.height;
console.log("div的高度（包括padding和border）是：" + heightWithBorder + "px");

// 方法3: 使用style属性获取内联样式中的高度
// 注意：这种方法只能获取通过内联样式设置的高度，并且返回的是字符串形式
var inlineHeight = div.style.height;
if (inlineHeight) {
    console.log("div的内联样式高度是：" + inlineHeight);
} else {
    console.log("div没有设置内联样式高度");
}

解释说明：

1. offsetHeight：这个属性返回元素的高度，包括 padding，但不包括 margin 和 border。它是一个只读属性，返回的是一个整数值。

2. getBoundingClientRect：这个方法返回一个 DOMRect 对象，该对象提供了元素的大小及其相对于视口的位置信息。rect.height 包括了 padding 和 border，但不包括 margin。

3. style.height：这个属性用于获取或设置元素的内联样式中的高度。如果高度是通过CSS类或外部样式表设置的，则不会返回任何值。