javascript - Find element height, including margin -

javascript - Find element height, including margin -

i'm making simple , fun drawing app, , in construction follows:

header canvas footer

i'm trying canvas total height of window, minus header height , footer height.

i've tried multiple things like:

canvas.height = window.height - (document.getelementbyid("header").offsetheight + document.getelementbyid("footer").offsetheight);

and i've tried:

function getheight(id) { id = document.getelementbyid(id); homecoming id.offsetheight + id.style.margintop + id.style.marginbottom; } canvas.height = window.height - (getheight("header") + getheight("footer"))

but no avail. in console id.style.margintop returned empty string, although margintop set in css... not set margintop, it's set margin: 8px 0 8px 0;

is there way, without using jquery, obtain rendered height of element, including margin?

i'm assuming we'd have separate margin: 8px 0 8px 0; separate variables, using id.style.margin... i'm not sure how separate it.

function outerwidth(el) { var width = el.offsetwidth; var style = getcomputedstyle(el); width += parseint(style.marginleft) + parseint(style.marginright); homecoming width; }

this jquery's outerwidth doing, scratched ::http://youmightnotneedjquery.com/ might interteresting farther develpoment

edit: in ie8 have utilize el.currentstyle[prop] instead of getcomputedstyle(el);

javascript html css