@ryanmorr/attr

attr

The ultimate DOM attribute, property, style, data, and event setter

Install

Download the CJS, ESM, UMD versions or install via NPM:

npm install @ryanmorr/attr

Usage

Import the library:

import attr from '@ryanmorr/attr';

Add an attribute:

attr(element, 'id', 'foo');

Add multiple attributes:

attr(element, {
    id: 'foo',
    class: 'bar baz qux'
});

Remove an attribute with null or undefined:

attr(element, 'class', null);

Set boolean attributes and properties:

attr(checkbox, 'checked', true);
attr(textfield, 'value', 'foo bar');
attr(element, 'innerHTML', '<span></span>');

Set styles as a string:

attr(element, 'style', 'width: 100px; height: 100px;');

Set styles as an object:

attr(element, 'style', {
    width: 100,
    height: 100
});

Set CSS custom properties:

attr(element, 'style', 'color: var(--color)');

attr(element, 'style', '--color: red');
attr(element, 'style', {'--color': 'blue'});

Add an event listener:

attr(element, 'onclick', (e) => {
    // Handle click event
});

Set data attributes (will automatically convert objects to string):

attr(element, 'data', {
    str: 'foo',
    num: 123,
    bool: true,
    object: {foo: 'bar'},
    array: [1, 2, 3]
});

Supports functions that return the new value (except when adding an event!). The element and the current value of the attribute are provided as the only 2 parameters:

attr(element, 'class', 'foo bar baz');
element.className; //=> "foo bar baz"
attr(element, 'class', (el, value) => value.split(' ').filter(cls => cls !== 'bar'));
element.className; //=> "foo baz"

attr(element, 'style', {width: 100, height: 100});
element.style.cssText; //=> "width: 100px; height: 100px"
attr(element, 'style', (el, value) => Object.assign({}, value, {height: null}));
element.style.cssText; //=> "width: 100px;"

attr(element, 'data', {foo: [1, 2, 3]});
element.dataset.foo; //=> "[1,2,3]"
attr(element, 'data', (el, value) => ({foo: value.foo.filter(val => val !== 2)}));
element.dataset.foo; //=> "[1,3]"

License

This project is dedicated to the public domain as described by the Unlicense.