Menu
Looking for reliable method to calculate the element's width/height + margin - padding + border using native JS only and be xbrowser (IE8+)
TA
360
Using jQuery, you can get element height including padding with $(ele). outerHeight() , get element height including padding, border and margin by $(ele). outerHeight(true) .
Use offsetWidth & offsetHeight properties of the DOM element to get its the width and height.
To get the height of an element minus padding, margin, border widths with JavaScript, we get the offsetWidth and offsetHeight and subtract them by the padding and border width and height. const cs = getComputedStyle(element); const paddingX = parseFloat(cs. paddingLeft) + parseFloat(cs.
Typically, offsetHeight is a measurement in pixels of the element's CSS height, including any borders, padding, and horizontal scrollbars (if rendered). It does not include the height of pseudo-elements such as ::before or ::after .
If you're only dealing with pixel values for the margin, padding and border properties, you can do the following:
// we're assuming a reference to your element in a 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 with other kinds of values (like ems, points or values like auto), I would like to refer you to this answer.
187
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
