包含边框，填充和边距的html元素（div）的完整高度？
我需要一个div的全高，我目前正在使用
document.getElementById('measureTool').offsetHeight
offsetHeight– 返回元素的高度，包括边框和填充（如果有），但不包括边距
但div中的嵌套元素之一，有20%的margin-top ，所以我得到一个错误的测量。 我尝试了style.marginTop和scrollHeight没有成功。
我怎样才能得到一个元素（div）在JavaScript中的全高（边框，填充，边距）？
如果没有其他的方法，我可以用jQuery。
如果你可以使用jQuery：
$('#divId').outerHeight(true) // gives with margins.
jQuery文档
对于香草的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); }
现场演示
代码源
那么这样的事情（没有jQuery）呢？ 这与@ gdoron的答案类似，但稍微简单一些。 在IE9 +，Firefox和Chrome上testing。
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 。
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/
我认为这个解决scheme更具可读性，但是没有一个解决scheme可以解决大小不是像素的问题…… 🙁
老的一个 – 无论如何…所有的jQuery禁用和快捷方式的人在那里这里有一些加脚本，扩大维度/ getabsoluteheight方法的其他答案：
function getallinheight(obj) { var compstyle=(typeof window.getComputedStyle==='undefined')?obj.currentStyle:window.getComputedStyle(obj); var marginTop=parseInt(compstyle.marginTop); var marginBottom=parseInt(compstyle.marginBottom); var borderTopWidth=parseInt(compstyle.borderTopWidth); var borderBottomWidth=parseInt(compstyle.borderBottomWidth); return obj.offsetHeight+ (isNaN(marginTop)?0:marginTop)+(isNaN(marginBottom)?0:marginBottom)+ (isNaN(borderTopWidth)?0:borderTopWidth)+(isNaN(borderBottomWidth)?0:borderBottomWidth); } alert(getallinheight(document.getElementById('measureTool')));
