dom - How to get element width/height with margin, padding, border in Native JavaScript (no jQuery) -

looking reliable method calculate element's width/height + margin - padding + border using native js , xbrowser (ie8+)

ta

if you're dealing pixel values margin, padding , border properties, can following:

// we're assuming reference element in variable called 'element' var style = element.currentstyle || window.getcomputedstyle(element),     width = element.offsetwidth, // or use style.width     margin = parsefloat(style.marginleft) + parsefloat(style.marginright),     padding = parsefloat(style.paddingleft) + parsefloat(style.paddingright),     border = parsefloat(style.borderleftwidth) + parsefloat(style.borderrightwidth);  alert(width + margin - padding + border); 

if you're dealing other kinds of values (like ems, points or values auto), refer this answer.