I need the full height of a div, I'm currently using
document.getElementById('measureTool').offsetHeight
offsetHeight
- Returns the height of an element, including borders and padding if any, but not margins
But one of the nested elements inside the div, has a margin-top
of 20%
, so I get a wrong measurement. I tried style.marginTop
and scrollHeight
without success.
How can I get the full height (border, padding, margin) of an element (div) in javascript?
If there isn't any other way I'm ok with jQuery.
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.
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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With