Helpers functions to manipulate the DOM element css classes.

Installing

npm install @borracciablu/dh-classlist

import {addClass} from '@borracciablu/dh-classlist';
var {addClass, removeClass, toggleClass} = require('@borracciablu/dh-classlist');

API Reference

addClass(itmList, clsList)

var itm = document.querySelectorAll('.btn');
var cls = ['d-none'];
addClass(itm, cls);

removeClass(itmList, clsList)

var itm = document.querySelectorAll('.btn');
var cls = ['d-none'];
removeClass(itm, cls);

toggleClass(itmList, clsList)

var itm = document.querySelectorAll('.btn');
var cls = ['d-none'];
toggleClass(itm, cls);

addClassThunk(itmList, clsList)

var itm = document.querySelectorAll('.btn');
var cls = ['d-none'];
var thunk = addClassThunk(itm, cls);
setTimeout(thunk, 3000);

removeClassThunk(itmList, clsList)

var itm = document.querySelectorAll('.btn');
var cls = ['d-none'];
var thunk = removeClassThunk(itm, cls);
setTimeout(thunk, 3000);

toggleClassThunk(itmList, clsList)

var itm = document.querySelectorAll('.btn');
var cls = ['d-none'];
var thunk = toggleClass(itm, cls);
setTimeout(thunk, 3000);

Deprecated API Reference

execClass(itmList, opList)

var docList = document.querySelectorAll('.doc');
execClass(docList, [{'add': 'd-block'}, {remove: 'd-none'}]);

// replace with
( addClass(docList, 'd-block')
, removeClass(docList, 'd-none'));

execClassThunk(itmList, opList)

var docList = document.querySelectorAll('.doc');
var thunk = execClassThunk(docList, [{'add': 'd-block'}, {remove: 'd-none'}]);
setTimeout(thunk, 3000);

// replace with
var thunk =  () => ( addClass(docList, 'd-block')
                   , removeClass(docList, 'd-none'));

setTimeout(thunk, 3000);

CDN

Recommended CDN:

https://unpkg.com/@borracciablu/dh-classlist@latest/dist/dh-classlist.min.js

var {addClass} = window.dhClasslist;

// Alternative syntax
var addClass = window.dhClasslist.addClass;