1. 首页
  2. 问题列表
  3. html元素（div）的全高度，包括边框、填充和边距？
提问者：小点点

html元素（div）的全高度，包括边框、填充和边距？


我需要一个div的全高度，我目前正在使用

document.getElementById('measureTool').offsetHeight

offsetHeight-返回元素的高度，包括边框和填充（如果有），但不包括边距

但是div中的一个嵌套元素的边缘顶部为20%，所以我得到了一个错误的度量。我尝试了style.边缘化顶部和scrollHeight没有成功。

如何在javascript中获取元素（div）的完整高度（边框、填充、边距）？

如果没有其他方法，我可以使用jQuery。


共3个答案

匿名用户

像这样的东西（没有jquery）怎么样？它类似于@gdoron的答案，但稍微简单一点。在IE9、Firefox和Chrome中进行了测试。

function getAbsoluteHeight(el) {
  // Get the DOM Node if you pass in a string
  el = (typeof el === 'string') ? document.querySelector(el) : el; 

  var styles = window.getComputedStyle(el);
  var margin = parseFloat(styles['marginTop']) +
               parseFloat(styles['marginBottom']);

  return Math.ceil(el.offsetHeight + margin);
}

这是一个工作jsfiddle。

匿名用户

如果你可以使用jQuery：

$('#divId').outerHeight(true) // gives with margins.

jQuery文档

对于vanilla javascript，您需要编写更多内容（像往常一样…）：

function Dimension(elmID) {
    var elmHeight, elmMargin, elm = document.getElementById(elmID);
    if(document.all) {// IE
        elmHeight = elm.currentStyle.height;
        elmMargin = parseInt(elm.currentStyle.marginTop, 10) + parseInt(elm.currentStyle.marginBottom, 10) + "px";
    } else {// Mozilla
        elmHeight = document.defaultView.getComputedStyle(elm, '').getPropertyValue('height');
        elmMargin = parseInt(document.defaultView.getComputedStyle(elm, '').getPropertyValue('margin-top')) + parseInt(document.defaultView.getComputedStyle(elm, '').getPropertyValue('margin-bottom')) + "px";
    }
    return (elmHeight+elmMargin);
}

住DEMO

代码源

匿名用户 

var el = document.querySelector('div');

var elHeight = el.offsetHeight;
elHeight += parseInt(window.getComputedStyle(el).getPropertyValue('margin-top'));
elHeight += parseInt(window.getComputedStyle(el).getPropertyValue('margin-bottom'));

console.log(elHeight);

https://jsfiddle.net/gbd47ox1/

我认为这个解决方案更具可读性，但所提出的解决方案都没有考虑到不是像素的大小…：（

相关问题