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
bower install apollo.js
or use the repository hook:
bower install https://github.com/toddmotto/apollo.git
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>
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.
- 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
this
context fix
- Internet Explorer
- 1.2.0
- Optimise
toggleClass
legacy definitions
- Optimise
- 1.1.0
- Optimise classList usage and reduce if statements
- 1.0.0
- Initial release