/apollo

Standalone cross-browser DOM class manipulation module

Primary LanguageJavaScriptOtherNOASSERTION

Apollo.js Build Status

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 this context fix
  • 1.2.0
    • Optimise toggleClass legacy definitions
  • 1.1.0
    • Optimise classList usage and reduce if statements
  • 1.0.0
    • Initial release