ECMAScript 6 DOM Utilities

• getElementSize() collects box model values (margin, border, padding, width and height) of an element.
• getPrefixedPropertyName() converts a CSS property name into a vendor specific property name if necessary.

Collects box model values (margin, border, padding, width and height) of an element.

import { getElementSize } from 'event-utils';

let size = getElementSize( element );

• element
  can either be a DOM element or selector string. If it is a selector string the function will get the element by calling document.querySelector.

• An object containing key-value pairs of box model values.

  size = {
    paddingTop: ...,
    paddingRight: ...,
    paddingBottom: ...,
    paddingLeft: ...,
  
    marginTop: ...,
    marginRight: ...,
    marginBottom: ...,
    marginLeft: ...,
  
    borderTopWidth: ...,
    borderRightWidth: ...,
    borderBottomWidth: ...,
    borderLeftWidth: ...,
    
    width: ...,
    height: ...,
    
    innerWidth: ...,
    innerHeight: ...,
    
    outerWidth: ...,
    outerHeight: ...,
    
    isBorderBox: true|false|undefined
  }
  

• An object with all values set to zero, if the element is hidden.
• undefined if the element is not a DOM node.

Converts a CSS property name into a vendor specific property name if necessary.

import { getPrefixedPropertyName } from 'event-utils';

let boxSizingPropertyName = getPrefixedPropertyName( 'boxSizing' );

• propertyName
  a CSS property value.

• The given property name, if the browser supports it: boxSizing
• A vendor specific property name: WebkitBoxSizing|MozBoxSizing|msBoxSizing|MsBoxSizing|OBoxSizing
• undefined if no propertyName was given.