get-outer-size

Get Elements width / height including border & margin.

Usage no npm install needed!

<script type="module">
  import getOuterSize from 'https://cdn.skypack.dev/get-outer-size';
</script>

README

get-outer-size

NPM version Build Status Coverage Status ISC License

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)