JS获取div高度

JavaScript是一种脚本语言，用于网页交互和动态效果。在前端开发中，获取元素的高度是一个非常常见的需求。本文将介绍如何使用JavaScript获取div元素的高度。

1.使用offsetHeight属性获取div高度

offsetHeight属性可以获取元素的高度，包括padding、border和滚动条的高度。以下是示例代码：

var div = document.getElementById("myDiv");
var height = div.offsetHeight;
console.log(height);

其中，getElementById方法用于获取指定id的元素。如果需要获取其他元素的高度，只需将id值替换为相应的值即可。

2.使用getBoundingClientRect()方法获取div高度

getBoundingClientRect()方法可以获取元素的位置和大小信息，包括元素的top、left、right、bottom和width、height属性。以下是示例代码：

var div = document.getElementById("myDiv");
var rect = div.getBoundingClientRect();
var height = rect.height;
console.log(height);

需要注意的是，getBoundingClientRect()方法返回的是一个DOMRect对象，包含了元素的位置和大小信息。可以根据需要获取所需的属性值。

3.使用clientHeight属性获取div高度

clientHeight属性可以获取元素的高度，不包括padding和border的高度。以下是示例代码：

var div = document.getElementById("myDiv");
var height = div.clientHeight;
console.log(height);

需要注意的是，clientHeight属性获取的是元素的可见高度，如果元素有滚动条，则不包括滚动条的高度。

常见问答

1.如何获取元素的宽度？

可以使用offsetWidth、getBoundingClientRect().width和clientWidth属性获取元素的宽度。与获取高度类似，offsetWidth包括padding、border和滚动条的宽度，getBoundingClientRect().width包括元素的宽度，而clientWidth只包括元素的可见宽度。

2.如何获取窗口的高度和宽度？

可以使用window.innerHeight和window.innerWidth属性获取窗口的高度和宽度。需要注意的是，这两个属性获取的是窗口的可见高度和宽度，不包括浏览器工具栏和滚动条的高度和宽度。

3.如何在元素大小发生变化时获取新的高度和宽度？

可以使用resize事件，在元素大小发生变化时触发事件，并获取新的高度和宽度。以下是示例代码：

var div = document.getElementById("myDiv");
div.addEventListener("resize", function() {
  var height = div.offsetHeight;
  var width = div.offsetWidth;
  console.log(height, width);
});

需要注意的是，resize事件只适用于窗口大小的变化和部分浏览器支持元素大小的变化。可以使用MutationObserver监听元素大小的变化。