@lprfhxcqsioghw/dom-dimensions v0.1.1

dom-dimensions

Javascript utility functions for measuring DOM elements

API

outerWidth

Measures the width of an element along the outer edge. By default, will include both left and right margins, but this is optional.

Should work on IE9+

Parameters

• el HTMLElement
• includeMargin boolean (optional, default true)

Returns number

outerHeight

Measures the height of an element along the outer edge. By default, will include both top and bottom margins, but this is optional.

Should work on IE9+

Parameters

• el HTMLElement
• includeMargin boolean (optional, default true)

Returns number

innerDimensions

Measures the width and height of the inner edge of an element. By default, will subtract the element's current padding, but this is optional.

Parameters

• el HTMLElement
• usePadding boolean (optional, default true)

Returns Rectangle

innerWidth

Optimized version of innerDimensions, to use if you only need the width of an element

Parameters

• el HTMLElement
• usePadding boolean (optional, default true)

Returns number

innerHeight

Optimized version of innerDimensions, to use if you only need the height of an element

Parameters

• el HTMLElement
• usePadding boolean (optional, default true)

Returns number

cssDimensionsToPx

Gets the equivalent pixel dimension according to the browser for any CSS unit of dimension allowed by CSS. Adds a temporary element to the DOM with the specified style and then measures the pixel length. This // way you can accurately convert, say, mm to px.

Parameters

• width string
• height string

Examples

// returns { width: 4, height: 38 }
cssDimensionsToPx('1mm', '10mm')

Returns Rectangle