sss-elemental
v1.3.1
Published
Pack of helpers to manipulate elements class names
Downloads
19
Maintainers
Readme
About
Elemental is most lightweight and Fault tolerant pure javascript DOM class-control helper with 100% functional test coverage.
If you are tired of connecting Jquery just to switch classes of elements, then this library is for you.
Installation
Download Elemental
Connect
Elemental
before your scripts.
<script src="/assets/js/lib/Elemental.js"></script>
- See how to use the Elemental.
Package managers 😎
If you are using package managers such as npm or yarn, import this lib as usual.
# Yarn
yarn add sss-elemental
# NPM
npm i sss-elemental --save
Do import Elemental from 'sss-elemental';
Usage
addClass
Adds string to element's class name
const item = document.querySelector('body');
Elemental.addClass(item, 'customClass');
removeClass
Removes string from element's class name
const item = document.querySelector('body');
Elemental.removeClass(item, 'customClass');
toggleClass
Adds or removes class depending on its presence.
const item = document.querySelector('body');
Elemental.toggleClass(item, 'customClass');
hasClass
Check if element has certain class name
const body = document.querySelector('body');
const isActive = Elemental.hasClass(body, 'body_active');
console.log(isActive); // true
injectCss
Inject CSS in element.style directly
Don't forget about camelCase syntax when styling from javascript
const body = document.querySelector('body');
const styles = {
display: 'none',
overflowY: 'hidden',
boxSizing: 'border-box',
}
Elemental.injectCss(body, styles);
eject
Eject all Elemental methods in to Element.prototype allowing you to update class-control syntax.
// Do eject
Elemental.eject();
// Be fancy
const body = document.querySelector('body');
body.addClass('body_custom');
body.removeClass('body_custom');
body.hasClass('body_custom');
body.toggleClass('body_custom');
This technique called Monkey patching and in large projects it is considered as not a best practice. But either way it is an optional feature. Elemental does nothing behind the scene without your command, and use it or not it's up to you to decide.
License
This project is available under the MIT license.