sss-elemental

Elemental

• About
• Installation
• Usage
  • addClass
  • removeClass
  • hasClass
  • injectCss
  • toggleClass
  • eject
• Browser Support
• License

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

1. Download Elemental

2. Connect Elemental before your scripts.

<script src="/assets/js/lib/Elemental.js"></script>

1. 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.