Html 元素(div)的全高度，包括边框、填充和边距？

If you can use jQuery:

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

jQuery docs

For vanilla javascript you need to write a lot more (like always...):

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);
}

Live DEMO

code source

What about something like this (no jquery)? It's similar to @gdoron's answer but a little simpler. Tested it in IE9+, Firefox, and 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);
}

Here is a working jsfiddle.

old one - anyway... for all jQuery-banning and shortcut folks out there here is some plus scripting which expands the dimension/getabsoluteheight approaches of the other answers:

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')));

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/

I think this solution is more readable, but none of the solutions presented account for sizes that aren't pixels... :(

Another functional solution using arrow functions:

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);

Vanilla JavaScript ECMAScript 5.1

• element.getBoundingClientRect() returns a DOMRect object which contains height (including padding & border)
• window.getComputedStyle(element) returns an object with all CSS properties after applying active stylesheets and performed any computation (if present)

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>

qdev wrote a nice solution, however I think offsetHeight is faster and better supported than getBoundingClientRect(). I also used ES6 to reduce the code size.

/**
* 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)
}

Use all the props, margin, border, padding and height in sequence.

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)
}

The earlier solutions are probably ideal. In search of an easy way, I came up with something like that. This wraps the target in a div. The height of the div is already calculated and rounded.

<div style="margin: 0; padding: 0; border: none;">
<p class="target">something info ex</p>
</div>

and in JavaScript:

var height = document.querySelector(".target").parentElement.offsetHeight;

in Vanilla JS in the function getAllmargin we get the sum of both margin top and bottom and with clientHeight we get the height including all paddings

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));