Getting an element's inner height
var style = window.getComputedStyle(document.getElementById("Example"), null);
style.getPropertyValue("height");
The above version will work in modern browsers. Please check currentStyle
for IE browsers.
clientHeight - give the height including padding but without the borders.
getComputedStyle - a way to tap into the CSS rules of an element and retrieve a property's value (padding)
Using parseInt is a way to strip away units and leave only the numeric value (which is in pixels)
parseFloat
can also be used for more precise sub-pixel measurements
Note that all values will automatically be converted by the DOM API to pixels
function getInnerHeight( elm ){
var computed = getComputedStyle(elm),
padding = parseInt(computed.paddingTop) + parseInt(computed.paddingBottom);
return elm.clientHeight - padding
}
DEMO:
// main method
function getInnerHeight( elm ){
var computed = getComputedStyle(elm),
padding = parseInt(computed.paddingTop) + parseInt(computed.paddingBottom);
return elm.clientHeight - padding
}
// demo utility function
function printInnerHeight( selector ){
console.clear()
console.log(
getInnerHeight( document.querySelector(selector) )
)
}
body{ display: flex; padding:0; margin: 0; }
div{ flex: 1; }
.demo1{
padding-top: 2vh;
padding-bottom: 1vh;
margin: 30px;
border: 10px solid salmon;
box-sizing: border-box;
outline: 1px solid red;
}
.demo2{
padding-top: 2vh;
padding-bottom: 4vh;
margin: 30px;
border: 10px solid salmon;
border-bottom-width: 0;
height: 150px;
outline: 1px solid red;
}
p::before{
content: '';
display: block;
height: 100%;
min-height: 50px;
background: lightgreen;
}
<div>
<h2>inner height should be ~50px</h2>
<button onclick="printInnerHeight('.demo1')">Get Inner Height</button>
<p class='demo1'></p>
</div>
<div>
<h2>inner height should be ~150px</h2>
<button onclick="printInnerHeight('.demo2')">Get Inner Height</button>
<p class='demo2'></p>
</div>
EDIT from comments:
http://jsfiddle.net/hTGCE/1/ (a bit more code then expected)
in the internet you find functions like this:
function getRectangle(obj) {
var r = { top: 0, left: 0, width: 0, height: 0 };
if(!obj)
return r;
else if(typeof obj == "string")
obj = document.getElementById(obj);
if(typeof obj != "object")
return r;
if(typeof obj.offsetTop != "undefined") {
r.height = parseInt(obj.offsetHeight);
r.width = parseInt(obj.offsetWidth);
r.left = r.top = 0;
while(obj && obj.tagName != "BODY") {
r.top += parseInt(obj.offsetTop);
r.left += parseInt(obj.offsetLeft);
obj = obj.offsetParent;
}
}
return r;
}
if you want to subtract the padding / border-width is set in the css-file and not dynamic in the style attribute:
var elem = document.getElementById(id);
var borderWidth = 0;
try {
borderWidth = getComputedStyle(elem).getPropertyValue('border-top-width');
} catch(e) {
borderWidth = elem.currentStyle.borderWidth;
}
borderWidth = parseInt(borderWidth.replace("px", ""), 10);
and with the padding the same. then you calculate it.