25/95

Determine the height and width of an element

Assume that ele represents the DOM of element you want to calculate the size.

// Get the styles
const styles = window.getComputedStyle(ele);

// The size without padding and border
const height = ele.clientHeight - parseFloat(styles.paddingTop) 
                                - parseFloat(styles.paddingBottom);
const width = ele.clientWidth - parseFloat(styles.paddingLeft) 
                              - parseFloat(styles.paddingRight);

// The size include padding
const clientHeight = ele.clientHeight;
const clientWidth = ele.clientWidth;

// The size include padding and border
const offsetHeight = ele.offsetHeight;
const offsetWidth = ele.offsetWidth;

// The size include padding, border and margin
const heightWithMargin = ele.offsetHeight + parseFloat(styles.marginTop)
                                          + parseFloat(styles.marginBottom);
const widthWithMargin = ele.offsetWidth + parseFloat(styles.marginLeft)
                                        + parseFloat(styles.marginRight);

Might be useful