jQuery classList plugin
Re-implementation of jQuery class manipulation methods that utilizes the
Compatible with jQuery 1.9+.
The DOM spec defines the
classList interface, allowing for adding/removing/toggling classes or checking if an element contains a specified class using built-in methods as opposed to manually parsing the
className field where classes are separated by spaces.
A couple of test suites comparing both implementations:
- https://jsperf.com/classlist-v-old-way/18 - small (10) number of classes
- https://jsperf.com/classlist-v-old-way/19 - large (100) number of classes
jQuery currently doesn't utilize this interface, one of the reasons being it's not supported by Internet Explorer 9 and it doesn't work on SVGs even in IE 11.
Note: in browsers that don't fully support the
classList interface (e.g. all IE & Android Browser) the plugin falls back to the built-in jQuery implementation so it doesn't break them.
The following browsers can utilize full functionality of this plugin:
- Chrome (for desktop & Android), Edge, Firefox, Opera: Current -1, Current
- Safari 7.0+
- iOS 7.0+
"Current -1, Current" denotes that the current stable version of the browser and the version that preceded it are supported. For example, if the current version of a browser is 24.x, we support the 24.x and 23.x versions.
In fact the code will work in many older versions, too, but they are not actively tested.
Supported browsers with the jQuery classList plugin pass the whole jQuery test suite with a few minor exceptions:
- A few tests that check for extra whitespaces in the
classattribute or the presence of the
classattribute are failing. This is mostly because in Safari up to version 9.x and in current Firefox & Chrome (at the time of writing this section)
classListupdate steps are not performed correctly and there is no way to control that behavior via the
classListinterface. Relevant bug reports:
- In Safari 7 passing the same class to
classList.addin multiple parameters results in duplicated class names in the
classattribute which makes another few tests fail. However,
classList.removeremoves all duplicated classes so this shouldn't be a problem unless you're parsing the
classNameattribute directly by yourself. This has been fixed in Safari 8.