Neurologically Paralyzing Mouseovers

    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

    16

    Version

    1.0.5

    License

    MIT

    Unpacked Size

    22.9 kB

    Total Files

    14

    Last publish

    Collaborators

    • davebenvenuti