我需要一个div的完整高度，目前我正在使用
document.getElementById('measureTool').offsetHeight
offsetHeight- 返回一个元素的高度，包括任何边框和内边距，但不包括外边距。
但是 div 元素中的一个嵌套元素具有 margin-top 为 20%，所以会导致测量结果错误。我尝试使用 style.marginTop 和 scrollHeight ，但没有成功。
如何使用 JavaScript 获取一个元素（div）的完整高度（边框、内边距、外边距）？
如果没有别的方法，我可以接受使用 jQuery。
这个怎么样（没有使用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。
$('#divId').outerHeight(true) // gives with margins.
如果使用纯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);
}
实时演示
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);
我认为这个解决方案更易读，但是没有一个呈现的解决方案考虑到不是像素的尺寸... :(
```<!-- language: lang-js -->
function getElementHeight(el) {
const $elComputedStyle = getComputedStyle(el);
return el.offsetHeight + parseInt($elComputedStyle.getPropertyValue('margin-top') + $elComputedStyle.getPropertyValue('margin-bottom'), 10);
}
``` - bboydflo使用 箭头函数 的另一种功能性解决方案：
let el = document.querySelector('div');
let style = window.getComputedStyle(el);
let height = ['height', 'padding-top', 'padding-bottom']
.map((key) => parseInt(style.getPropertyValue(key), 10))
.reduce((prev, cur) => prev + cur);
margin-top 和 margin-bottom。 - xyhhxpadding-top 和 padding-bottom 计算到总高度中，因为它们已经被添加到 height 中，再次计算会得出错误的总高度。 - Ali Hussnain - alichampionqdev写了一个好的解决方案，但我认为offsetHeight比getBoundingClientRect()更快、更受支持。我还使用ES6来减小代码大小。
/**
* Returns the element height including margins
* @param element - element
* @returns {number}
*/
function outerHeight(element) {
const height = element.offsetHeight,
style = window.getComputedStyle(element)
return ['top', 'bottom']
.map(side => parseInt(style[`margin-${side}`]))
.reduce((total, side) => total + side, height)
}
按照顺序使用所有的道具，包括margin、border、padding和height。
function getElmHeight(node) {
const list = [
'margin-top',
'margin-bottom',
'border-top',
'border-bottom',
'padding-top',
'padding-bottom',
'height'
]
const style = window.getComputedStyle(node)
return list
.map(k => parseInt(style.getPropertyValue(k), 10))
.reduce((prev, cur) => prev + cur)
}
.map(k => parseInt(style.getPropertyValue(k)), 10) 应该是 .map(k => parseInt(style.getPropertyValue(k), 10))。 - Jespertheend纯JavaScript ECMAScript 5.1
height（包括padding和border）的DOMRect对象var element = document.getElementById('myID'),
height = element.getBoundingClientRect().height,
style = window.getComputedStyle(element);
// height: element height + vertical padding & borders
// now we just need to add vertical margins
height = ["top", "bottom"]
.map(function(side) {
return parseInt(style['margin-' + side], 10)
})
.reduce(function(total, side) {
return total + side
}, height)
// result: compare with devtools computed measurements
document.querySelector('.result').innerText = 'Total height is: ' + height + 'px';#myID {
padding: 10px 0 20px;
border-top: solid 2px red;
border-bottom: solid 3px pink;
margin: 5px 0 7px;
background-color: yellow;
}
.result {
margin-top: 50px;
}<div id="myID">element</div>
<div class="result"></div>旧的方法 - 无论如何...对于所有不使用jQuery和快捷方式的人，这里是一些扩展其他答案中维度/获取绝对高度方法的脚本：
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')));
前面的解决方案可能是最理想的。在寻找简单方法时，我想到了类似于这样的东西。这将目标包装在一个div中。 div的高度已经被计算并四舍五入。
<div style="margin: 0; padding: 0; border: none;">
<p class="target">something info ex</p>
</div>
在 JavaScript 中：
var height = document.querySelector(".target").parentElement.offsetHeight;
使用原生JS，在函数getAllmargin中，我们获取了上下边距的总和，并且通过clientHeight获取了包括所有padding在内的高度。
var measureTool = document.getElementById('measureTool');
function getAllmargin(elem){
//Use parseInt method to get only number
return parseInt(window.getComputedStyle(elem, null).getPropertyValue('margin-top'))
+ parseInt(window.getComputedStyle(elem, null).getPropertyValue('margin-bottom'));
}
//Finally we get entire height
console.log(measureTool.clientHeight + getAllmargin(measureTool));