https://github.com/borracciablu/dh-classlist

Helpers functions to manipulate the DOM element css classes
https://github.com/borracciablu/dh-classlist

browser classlist dom javascript utility

Last synced: about 1 month ago
JSON representation

Helpers functions to manipulate the DOM element css classes

• Host: GitHub
• URL: https://github.com/borracciablu/dh-classlist
• Owner: borracciaBlu
• License: bsd-3-clause
• Created: 2020-01-11T12:07:11.000Z (almost 5 years ago)
• Default Branch: master
• Last Pushed: 2024-09-24T12:15:48.000Z (4 months ago)
• Last Synced: 2024-10-29T00:21:19.895Z (2 months ago)
• Topics: browser, classlist, dom, javascript, utility
• Language: JavaScript
• Homepage:
• Size: 4.38 MB
• Stars: 3
• Watchers: 3
• Forks: 2
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

        


  

    

  

  


  

	Helpers functions to manipulate the DOM element css classes.

  





    

    

    

    





	



## Installing

`npm install @borracciablu/dh-classlist`

```js

import {addClass} from '@borracciablu/dh-classlist';

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

```

## API Reference

### addClass(itmList, clsList)

```js

var itm = document.querySelectorAll('.btn');

var cls = ['d-none'];

addClass(itm, cls);

```

### removeClass(itmList, clsList)

```js

var itm = document.querySelectorAll('.btn');

var cls = ['d-none'];

removeClass(itm, cls);

```

### toggleClass(itmList, clsList)

```js

var itm = document.querySelectorAll('.btn');

var cls = ['d-none'];

toggleClass(itm, cls);

```

### addClassThunk(itmList, clsList)

```js

var itm = document.querySelectorAll('.btn');

var cls = ['d-none'];

var thunk = addClassThunk(itm, cls);

setTimeout(thunk, 3000);

```

### removeClassThunk(itmList, clsList)

```js

var itm = document.querySelectorAll('.btn');

var cls = ['d-none'];

var thunk = removeClassThunk(itm, cls);

setTimeout(thunk, 3000);

```

### toggleClassThunk(itmList, clsList)

```js

var itm = document.querySelectorAll('.btn');

var cls = ['d-none'];

var thunk = toggleClass(itm, cls);

setTimeout(thunk, 3000);

```

## Deprecated API Reference

### execClass(itmList, opList) 

```js

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) 

```js

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

```js

var {addClass} = window.dhClasslist;

// Alternative syntax

var addClass = window.dhClasslist.addClass;

```