coy

element manipulation

Usage no npm install needed!

<script type="module">
  import coy from 'https://cdn.skypack.dev/coy';
</script>

README

coy

element attribute manipulation.

npm install coy

usage

pass node reference to constructor. exposes four methods.

var body = coy(document.body);

body.add
body.remove
body.toggle
body.has

all methods accept an arbitrary number of arguments.

every method but has is chainable.

arguments can be of type string, array, or object.

  • string will add or remove a class to the element.

  • array will add or remove each item as a class to the element.

  • dictionary will add or remove attributes. key as attribute name, value as attribute value.

has returns true only if all attributes match.

e.g.,

coy(document.body).add('class', ['class1', 'class2'], {'id':'element'});

further examples

var element = coy(document.querySelector(query))
    .add('class')
    .add('class', ['class1', 'class2'])
    .add('class', {'id':'element'})
    .add(['class1', 'class2'])
    .add(['class1', 'class2'], {'id':'element'})
    .add({'id':'element'}, ['class1', 'class2'])
    .add({'id':'element'});

element.remove('class')
    .remove('class', ['class1', 'class2'])
    .remove('class', {'id':'element'})
    .remove(['class1', 'class2'])
    .remove(['class1', 'class2'], {'id':'element'})
    .remove({'id':'element'}, ['class1', 'class2'])
    .remove({'id':'element'});

element.toggle('class')
    .toggle('class', ['class1', 'class2'])
    .toggle('class', {'id':'element'})
    .toggle(['class1', 'class2'])
    .toggle(['class1', 'class2'], {'id':'element'})
    .toggle({'id':'element'}, ['class1', 'class2'])
    .toggle({'id':'element'});

element.has('class')
element.has('class', ['class1', 'class2']);
element.has('class', {'id':'element'});
element.has(['class1', 'class2']);
element.has(['class1', 'class2'], {'id':'element'});
element.has({'id':'element'}, ['class1', 'class2']);
element.has({'id':'element'});