@slicemenice/dom-utils v2.1.0

domUtils

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.

getElementSize

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

Example

import { getElementSize } from 'event-utils';

let size = getElementSize( element );

Parameters

• 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.

Returns

• 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.

getPrefixedPropertyName

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

Example

import { getPrefixedPropertyName } from 'event-utils';

let boxSizingPropertyName = getPrefixedPropertyName( 'boxSizing' );

Parameters

• propertyName
  a CSS property value.

Returns

• 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.