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.


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.