apollo
apollo copied to clipboard
toddmotto
Standalone cross-browser DOM class manipulation module
Apollo.js 
Apollo is a 1KB standalone DOM class manipulation module that provides a cross-browser wrapper for addClass, hasClass, removeClass and toggleClass methods. Apollo uses the modern and blazing fast classList methods when available, and falls back to manual class manipulation for legacy support, meaning IE6+ support through to Chrome.
// hasClass() returns boolean on single class
apollo.hasClass(element, 'className1'); single as string
apollo.hasClass(element, ['className1']); single as array
// addClass() adds single or multiple classes
apollo.addClass(element, 'className1'); // single as string
apollo.addClass(element, ['className1']); // single as array
apollo.addClass(element, 'className1 className2'); // multiple in string
apollo.addClass(element, ['className1', 'className2']); // multiple as array
// removeClass() removes single or multiple classes
apollo.removeClass(element, 'className1'); // single as string
apollo.removeClass(element, ['className1']); // single as array
apollo.removeClass(element, 'className1 className2'); // multiple in string
apollo.removeClass(element, ['className1', 'className2']); // multiple as array
// toggleClass() toggles single or multiple classes
apollo.toggleClass(element, 'className1'); // single as string
apollo.toggleClass(element, ['className1']); // single as array
apollo.toggleClass(element, 'className1 className2'); // multiple in string
apollo.toggleClass(element, ['className1', 'className2']); // multiple as array
Installing with Bower
bower install apollo.js
or use the repository hook:
bower install https://github.com/toddmotto/apollo.git
Manual installation
Ensure you're using the files from the dist directory (contains compiled production-ready code). Ensure you place the script before the closing </body> tag.
<body class="no-js">
<!-- html above -->
<script src="dist/apollo.js"></script>
<script>
apollo.addClass(document.body, 'js');
apollo.removeClass(document.body, 'no-js');
</script>
</body>
Contributing
In lieu of a formal styleguide, take care to maintain the existing coding style. Add unit tests for any new or changed functionality. Lint and test your code using Gulp.
Release history
- 1.7.0
- Use lowercase module definition
- Move to Gulp
- 1.6.0
- Array of classes support, syntax improvements
- 1.5.0
- Add CommonJS/Browserify support
- 1.4.0
- Support for adding/removing/toggling multiple classes
- 1.3.0
- Add Jasmine tests
- Add AMD support
- Split out Object methods and return based on feature test
- 1.2.1
- Internet Explorer
thiscontext fix
- Internet Explorer
- 1.2.0
- Optimise
toggleClasslegacy definitions
- Optimise
- 1.1.0
- Optimise classList usage and reduce if statements
- 1.0.0
- Initial release
toddmotto