Is a simple module for managing element attributes.
You can see how it works by opening your browser's console and following along. Just copy and paste the code segments.
Get a list of elements.
var list = document.getElementsByTagName("p");
Set the class of the elements to "foo".
Clattr.set(list, "foo");
Toggle off the "foo" class.
Clattr.toggle(list, "foo");
Set the class list to "foo" and "bar".
Clattr.toggle(list, ["foo", "bar"]);
Remove the "bar" class.
Clattr.remove(list, "bar");
Swap the class from "foo" to "bar".
Clattr.toggle(list, ["foo", "bar"]);
Add "foo" and "bar" to a new attribute named "bam".
Clattr.toggle(list, ["foo", "bar"], "bam");
Remove the "foo" and "bar" attributes from the "bam" attribute but add them to the new "bum" attribute.
Clattr.toggle(list, ["foo", "bar"], ["bam", "bum"]);
Remove all values from the attributes.
Clattr.set(list, "", ["class", "bam", "bum"]);
Add an ID to this paragraph.
Clattr.toggle(list[11], "hi", "id");
Tell Clattr that we want to operate on the "id" attribute from now on.
Clattr.setAttr('id');
Verify that that paragraph has the ID you gave it.
Clattr.has(list[11], "hi");
Change that paragraph's ID.
Clattr.set(document.getElementById("hi"), "bye");
Clattr can be useful for swapping images, triggering UI changes, CSS animations, etc.