Other JavaScript Libraries - Beginning JavaScript - page 534

This code selects multiple types of elements and sets their text color to red. Contrast that with
Prototype:
// Prototype
function changeColor(item) {
var styles {
color: "red"
};
item.setStyle(styles);
}
$$("div", ".class-one").forEach(changeColor);
Note that you could use this technique in MooTools. In fact, you want to do so when performing
multiple operations to the same set of elements. Remember that methods like MooTools' setStyle()
and jQuery's css() are iterative; they loop over the array. Chaining iterative methods together
means you are executing multiple loops, which is inefficient.
Changing style
The previous MooTools' code example introduced you to the setStyle() method. It accepts two
arguments: the first is the CSS property, and the second is its value. Like jQuery, you can use the
CSS property used in a style sheet or the camel‐case version used in script:
$("myDiv").setStyle("background-color", "red"); // valid
$("myDiv").setStyle("backgroundColor", "red"); // valid, too
Both lines of this code set the element's background color to red; so you can use either property
name to set individual style properties.
MooTools also has a setStyles() method for changing multiple CSS properties. To use this
method, pass an object that contains the CSS properties and values, like this:
$("myDiv").setStyles({
backgroundColor: "red",
color: "blue"
});
This is, of course, not the ideal way to change an element's style. So, MooTools adds the addClass() ,
removeClass() , toggleClass() , and hasClass() extension methods to DOM element objects.
The addClass() and removeClass() methods do just what their names imply. They add or remove
the specified class to or from the element:
var div = $("myDiv");
div.addClass("class-one");
div.removeClass("class-two");
The toggleClass() method, naturally, toggles a class.
div.toggleClass("class-three");