如何获取DOM元素高度

本文将从多个方面详细阐述如何获取DOM元素的高度，帮助读者解决这一常见问题。

一、使用JavaScript获取DOM元素高度

使用JavaScript获取DOM元素高度是最基本的方法。我们可以使用DOM提供的属性来获取元素的高度：

var element = document.getElementById('elementId');
var height = element.offsetHeight;
console.log(height);

其中，document.getElementById('elementId')用来获取指定ID的元素，offsetHeight则用来获取元素的总高度（包括padding、border和content）。

如果需要获取元素的可见高度（不包括padding和border），可以使用clientHeight属性：

var element = document.getElementById('elementId');
var height = element.clientHeight;
console.log(height);

类似地，如果需要获取元素内容（不包括padding、border和滚动条）的高度，可以使用scrollHeight属性：

var element = document.getElementById('elementId');
var height = element.scrollHeight;
console.log(height);

二、使用jQuery获取DOM元素高度

如果项目中使用了jQuery，那么获取DOM元素高度将变得更加方便。jQuery提供了多个方法来获取元素高度：

var height = $('#elementId').height(); // 获取可见高度
var height = $('#elementId').innerHeight(); // 获取内容和padding的高度
var height = $('#elementId').outerHeight(); // 获取所有高度，包括border和margin
var height = $('#elementId').outerHeight(true); // 和outerHeight()一样，但包括margin
console.log(height);

三、使用CSS获取DOM元素高度

除了使用JavaScript和jQuery来获取元素高度外，我们还可以使用CSS的height属性来获取。但是请注意，height属性所获取的高度只包括元素的内容部分，不包括padding、border等。

#elementId {
  height: auto; /*必须先设置height为auto*/
  border: 1px solid #ccc;
  padding: 10px;
  width: 200px;
}
var height = parseInt(window.getComputedStyle(document.getElementById('elementId')).height);
console.log(height);

上述代码中，我们首先需要将元素的height属性设置为auto，然后再使用window.getComputedStyle()方法获取元素的样式，height属性所获取的值为字符串类型，需要使用parseInt()方法将其转为整型。

四、在异步加载后获取DOM元素高度

在项目中，常常会使用异步加载技术，比如使用AJAX来动态获取数据。此时，如果需要获取异步加载后的内容高度，我们可以使用setInterval()定时器来获取元素高度，直至其加载完毕。

var interval = setInterval(function() {
  var element = document.getElementById('elementId');
  if (element.offsetHeight > 0) {
    clearInterval(interval);
    var height = element.offsetHeight;
    console.log(height);
  }
}, 100);

上述代码中，我们使用setInterval()方法每100毫秒检查一次元素是否已经加载完毕，当元素的offsetHeight大于0时，清除定时器，然后获取高度。

五、结语

本文从JavaScript、jQuery和CSS三个方面阐述了获取DOM元素高度的方法，同时介绍了在异步加载后获取元素高度的技巧。希望本文能够帮助读者解决日常开发中的问题。

鹏仔微信 15129739599 鹏仔QQ344225443 鹏仔前端 pjxi.com 共享博客 sharedbk.com