https://github.com/fabiospampinato/classattr
A classList-like API that's purely based on reading/writing the class attribute.
https://github.com/fabiospampinato/classattr
attribute classlist
Last synced: 7 months ago
JSON representation
A classList-like API that's purely based on reading/writing the class attribute.
- Host: GitHub
- URL: https://github.com/fabiospampinato/classattr
- Owner: fabiospampinato
- License: mit
- Created: 2022-07-01T17:14:53.000Z (over 3 years ago)
- Default Branch: master
- Last Pushed: 2025-01-25T19:09:46.000Z (about 1 year ago)
- Last Synced: 2025-06-23T08:16:20.755Z (8 months ago)
- Topics: attribute, classlist
- Language: TypeScript
- Homepage:
- Size: 11.7 KB
- Stars: 6
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: readme.md
- License: license
Awesome Lists containing this project
README
# ClassAttr
A `classList`-like API that's purely based on reading/writing the class attribute.
## WHY?!
Because apparently touching the `classList` API for a node causes a `DOMTokenList` to be allocated for that node indefinitely. Like you may be asking the `classList` API to delete a class from a node that perhaps doesn't even have classes to begin with, and that will still allocate a `DOMTokenList` for that node, which sounds like nonsense to me.
Also sometimes the `classList` API pointlessly triggers `MutationObserver`s even when it doesn't actually change any class, which sounds like nonsense to me also.
Those problems is what this library is meant to address, maybe you don't need it.
## Install
```sh
npm install classattr
```
## Usage
It works just like the `classList` API.
```ts
import ClassAttr from 'classattr';
// Let's get a targe telement to manipulate the classes of
const element = document.body;
// Let's use all the provided classList-like methods
ClassAttr.add ( element, 'foo', 'bar', 'baz' );
ClassAttr.contains ( element, 'foo' ); // => true
ClassAttr.contains ( element, 'foo2' ); // => false
ClassAttr.remove ( element, 'bar' );
ClassAttr.toggle ( element, 'baz' );
ClassAttr.toggle ( element, 'baz' );
ClassAttr.toggle ( element, 'baz', true );
ClassAttr.toggle ( element, 'baz', false );
```
## License
MIT © Fabio Spampinato