classtweak
A JS micro library for CSS class manipulation. classtweak works in conjuction with the new HTML5 Selectors API enabling you to tweak multiple elements and classes at once.
Usage Examples
The classtweak library is designed to be simple to use and flexible.
Operating on a DOM element
The simplest case is calling classtweak
on a dom reference, with class modifiers:
var el = document; // add class 'bounce'; // remove class 'bounce'; // toggle class 'bounce; // add class 'bounce' and toggle class 'slide';
NOTE: It is also possible to tweak multiple objects at once by passing an array of elements.
Using a Tweaker Function
As an additional helper, classtweak
can return a function for tweaking the dom elements supplied in the original call:
var tweaker = ; // add class 'bounce'; // remove class 'bounce'; // toggle class 'bounce'; // add class 'bounce' and toggle the class 'slide';
Using the Query Selector API
You can also work with selectors as per the maturing Selectors API:
// add the class 'bounce' to all sections on the page;
By default, this is scoped at the document
level but can this can be overriden by supplying a third parameter for the HTML element that's subtree will be searched:
var testNode = document; // add the class 'bounce' to any sections that are children of the test node;
Alternative Modification Syntax
As an option, I've also added an alternative modification syntax based on some feedback I received:
var el = document; // add class 'bounce'; // remove class 'bounce'; // toggle class 'bounce; // add class 'bounce' and toggle class 'slide';
Chaining
I've also added chaining to classtweak so you can be really, really terse. The behaviour of chaining is sensitive to the context of the classtweak
call though so be aware of that.
If you want to tweak classes on a number of different elements with different class modifications you would call classtweak like:
classtweak 'section' '-active' 'section[data-route="/"]' '+active';
Alternatively if you have created a tweaker on a set of target elements, you can chain those calls too:
'+slide''+bounce';
In reality, though, this probably has limited value as you can achieve the same by simply passing through a space delimited string of all the class tweaks:
'+slide +bounce';