get-size

What is get-size?

The get-size npm package is used to get the size of elements in a web page. It provides a way to measure the width, height, and other dimensions of an element, including padding, border, and margin. This can be particularly useful for layout calculations and responsive design.

What are get-size's main functionalities?

Get Element Size

This feature allows you to get the width and height of a DOM element. The `getSize` function takes a DOM element as an argument and returns an object containing the width and height of the element.

const getSize = require('get-size');
const elem = document.querySelector('.element');
const size = getSize(elem);
console.log(size.width, size.height);

Get Element Size with Padding and Border

This feature allows you to get the inner width and height of a DOM element, which includes padding and border. The `getSize` function returns an object containing `innerWidth` and `innerHeight` properties.

const getSize = require('get-size');
const elem = document.querySelector('.element');
const size = getSize(elem);
console.log(size.innerWidth, size.innerHeight);

Get Element Size with Margin

This feature allows you to get the outer width and height of a DOM element, which includes margin. The `getSize` function returns an object containing `outerWidth` and `outerHeight` properties.

const getSize = require('get-size');
const elem = document.querySelector('.element');
const size = getSize(elem);
console.log(size.outerWidth, size.outerHeight);

Other packages similar to get-size

element-size

The element-size package provides similar functionality to get-size, allowing you to measure the dimensions of DOM elements. It offers methods to get the width, height, and other dimensions of an element. Compared to get-size, element-size is more lightweight but may lack some of the additional features provided by get-size.

dom-helpers

The dom-helpers package is a collection of DOM utility functions, including methods to get the size of elements. It provides a more comprehensive set of utilities for DOM manipulation and measurement. Compared to get-size, dom-helpers offers a broader range of functionalities beyond just measuring element sizes.

resize-observer-polyfill

The resize-observer-polyfill package provides a polyfill for the ResizeObserver API, which allows you to observe changes to the size of an element. While it does not directly provide methods to get the size of an element, it allows you to react to size changes in a more efficient way. Compared to get-size, resize-observer-polyfill is more suitable for dynamic size monitoring.

README

getSize

Get the size of elements.

var size = getSize( elem );
// elem can be an element
var size = getSize( document.querySelector('#selector') )
// elem can be a string, used as a query selector
var size = getSize('#selector')

Returns an object with: width, height, innerWidth/Height, outerWidth/Height, paddingLeft/Top/Right/Bottom, marginLeft/Top/Right/Bottom, borderLeft/Top/Right/BottomWidth and isBorderBox.

Tested in IE8, IE9 and good browsers.

Install

Install with Bower :bird:: bower install get-size

Install with npm: npm install get-size

Fractional values in IE8

For percentage or em-based sizes, IE8 does not support fractional values. getSize will round to the nearest value.

MIT License

getSize is released under the MIT License.