https://github.com/lukeed/classico
A tiny (255B) shim when Element.classList cannot be used~!
https://github.com/lukeed/classico
Last synced: 10 months ago
JSON representation
A tiny (255B) shim when Element.classList cannot be used~!
- Host: GitHub
- URL: https://github.com/lukeed/classico
- Owner: lukeed
- License: mit
- Created: 2018-10-30T00:57:38.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2019-01-01T07:23:30.000Z (over 7 years ago)
- Last Synced: 2025-09-27T02:58:02.948Z (11 months ago)
- Language: JavaScript
- Homepage:
- Size: 16.6 KB
- Stars: 62
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: readme.md
- License: license
Awesome Lists containing this project
README
# classico [](https://travis-ci.org/lukeed/classico)
> A tiny (242B) shim for when [`Element.classList`](https://developer.mozilla.org/en-US/docs/Web/API/Element/classList) cannot be used~!
This module exposes three module definitions:
* **ES Module**: `dist/classico.mjs`
* **CommonJS**: `dist/classico.js`
* **UMD**: `dist/classico.min.js`
## Install
```
$ npm install --save classico
```
## Usage
```js
import { remove, toggle } from 'classico';
const $ = document.querySelector.bind(document);
const isOpen = 'menu__open';
$('.menu-nav').onclick = () => {
toggle(document.body, isOpen);
};
$('.menu-overlay').onclick = () => {
remove(document.body, isOpen);
};
```
## API
### has(node, str)
Returns: `Boolean`
Checks if the Element's `className` contains the class value – akin to `Element.classList.contains()`.
### add(node, ...str)
Returns: `undefined`
Add the class value(s) to the Element's `className` – akin to `Element.classList.add()`.
> **Note:** Classico will not append a className if the Element already contains it.
```js
let elem = document.body;
// add one class
classico.add(elem, 'foo');
// add multiple classes
classico.add(elem, 'foo', 'bar', 'baz');
//=> Only 'bar' & 'baz' were added this time!
```
### remove(node, ...str)
Returns: `undefined`
Remove the class value(s) to the Element's `className` – akin to `Element.classList.remove()`.
```js
let elem = document.body;
// remove one class
classico.remove(elem, 'foo');
// remove multiple classes
classico.remove(elem, 'bar', 'baz');
```
### toggle(node, str, force)
Returns: `Boolean`
Toggles the existence of a class for an Element – akin to `Element.classList.toggle()`.
When `force` is not defined, the `str` value will be added if not already and removed if it existed.
If `force` is defined and truthy, the `str` value will be added.
If `force` is defined and falsey, the `str` value will be removed.
Returns `true` if the class was successfully added to the Element.
Returns `false` if the class was removed from the Element's `className` value.
## License
MIT © [Luke Edwards](https://lukeed.com)