@zcorky/dom

dom

Dom utils

Install

$ npm install @zcorky/dom

Usage

import {
  $,
  setStyle, setStyles,
  addEvent, addEvents,
  removeEvent, removeEvents,
  onTap,
  getClientXY,
} from '@zcorky/dom';

// 1 get element, remove jquery
const $element = $('#root') // powered by document.querySelector

// 2 set style(s)
setStyle($element, 'width', 10);
setStyle($element, 'width', '100px');
setStyle($element, 'zIndex', 10);
setStyle($element, 'transform', 'translate3d(10, 10, 0)');
// or batch
setStyles($element, {
  'width': 10,
  'zIndex': 10,
  'transform': 'translate3d(10, 10, 0)',
});

// 3 add/remove event
const handler = event => { /* do something */ }
addEvent($element, 'click', handler);
addEvent($element, 'tap', handler); // support simple tap event for mobile
// = onTap($element, handler);
// or batch
addEvents($element, ['click', 'tap'], handler);

// 4 get position
// 4.1 MouseEvent | TouchEvent event position (x, y) => (clientX, clientY)
getClientXY(event); // { clientX, clientY }