Управление DOM с помощью JavaScript в современных браузерах и IE 11+
Предположим, что ele
представляет DOM элемента, у которого вы хотите рассчитать размер.
// 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);