KiKiKi-KiKi / getOuterSize

Get Element width / height including margin & border

get-outer-size

install

$ npm install --save get-outer-size

use

import getOuterSize from 'get-outer-size';

const element = document.getElementById('my-element');
const {width, height} = getOuterSize(element);
// width = element width + border width + margin-right + margin-left
// height = element width + border width + margin-top + margin-bottom

example

<div class="div"></div>

.div {
  margin: 10px 20px 15px;
  width: 100px;
  height: 100px;
}

const element = document.getElementById('my-element');
const {width, height} = getOuterSize(element);
width; // => 140 (100px + 20px + 20px)
height; // => 125 (100px + 10px + 15px)