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);


Detect mobile browsers
Distinguish between left and right mouse clicks