Miss any of our Open RFC calls?Watch the recordings here! »

dom-dimensions

1.0.5 • Public • Published

dom-dimensions

dom-dimensions is a small library that makes DOM element dimension calculation easier.

Installation

yarn add dom-dimensions

or

npm install dom-dimensions

Usage

import DOMDimensions from 'dom-dimensions';

const el = document.getElementById("someElement"); // etc

const dimensions = new DOMDimensions(el);

const border = dimensions.border(); // { top: ..., right: ..., bottom: ..., left: ... } as floats
const margin = dimensions.margin(); // ditto
const padding = dimensions.padding(); // ditto

const innerHeight = dimensions.height();
const heightIncludingPadding = dimensions.height({ padding: true });
const heightIncludingPaddingAndMargin = dimensions.height({ padding: true, margin: true });
const heightIncludingPaddingMarginAndBorder = dimensions.height({ padding: true, margin: true, border: true }):

const innerWidth = dimensions.width();
const widthIncludingPadding = dimensions.width({ padding: true });
const widthIncludingPaddingAndMargin = dimensions.width({ padding: true, margin: true });
const widthIncludingPaddingMarginAndBorder = dimensions.width({ padding: true, margin: true, border: true }):

API

class DOMDimensions

  • constructor(domElement, [window]);

    The constructor accepts a domElement and an optional window, defaults to the global window, if it exists

  • border()

    Returns an object with attributes top, right, bottom, and left, each of which is the corresponding value as a float

  • margin()

    Returns an object with attributes top, right, bottom, and left, each of which is the corresponding value as a float

  • padding()

    Returns an object with attributes top, right, bottom, and left, each of which is the corresponding value as a float

  • height(options={})

    By default, returns the inner height of the element, not including margin, border, or padding. Options accepts any combination of padding, margin, and/or border, where if the value is truthy, will be included in height calculation

  • width(options={})

    By default, returns the inner width of the element, not including margin, border, or padding. Options accepts any combination of padding, margin, and/or border, where if the value is truthy, will be included in width calculation

License

MIT

Install

npm i dom-dimensions

DownloadsWeekly Downloads

8

Version

1.0.5

License

MIT

Unpacked Size

22.9 kB

Total Files

14

Last publish

Collaborators

  • avatar