CSS

.myElement {
  --left: calc(var(--offset-x) * 1px);
  --top: calc(var(--offset-y) * 1px);

  background-position: var(--left) var(--top);
  transition: background-position 500ms ease-in-out;
}

.myElement:after {
  --last-left: calc(var(--last-click-x) * 1px);
  --last-top: calc(var(--last-click-y) * 1px);

  position: absolute;
  display: block;
  content: "<" var(--node-name) ">" " (Type: " var(--node-type) ")";
  left: var(--last-left);
  top: var(--last-top);
  transition: left 250ms ease-in-out, top 250ms ease-in-out;
}
    

JavaScript

const $domElement = document.querySelector('.myElement');
// Get `offsetX/Y` for `mouseover`
domEventToCSSVariable($domElement, 'offsetX');
domEventToCSSVariable($domElement, 'offsetY');

/* Custom CSS variable name (`last-click-` instead of `offset`),
    trigger on `mousedown` instead of the default (`mousemove`)
*/
domEventToCSSVariable($domElement, 'offsetX', { event: 'mousedown', cssVarName: 'last-click-x' });
domEventToCSSVariable($domElement, 'offsetY', { event: 'mousedown', cssVarName: 'last-click-y' });

/* Use a custom CSS variable name (`width` instead of `offsetWidth`),
    only trigger it once
*/
domEventToCSSVariable($domElement, 'offsetWidth', { once: true, cssVarName: 'width' });

/* Get value of `noteType` (as a string), `nodeName` (not as a string) as `nodeNameNotString`, and `nodeName` (as a string, because that is its type)
    on `$domElement`,
    when `dblclick` is triggered (instead of the default `mousemove`),
    only trigger once (value won't change in this example)
*/
domEventToCSSVariable($domElement, 'nodeType', { event: 'dblclick', stringify: true,  once: true });
domEventToCSSVariable($domElement, 'nodeName', { event: 'dblclick', stringify: false, once: true, cssVarName: 'nodeNameNotString' });
domEventToCSSVariable($domElement, 'nodeName', { event: 'dblclick', once: true });