Java Reference
In-Depth Information
This code fi nds an element with an id of myDiv, extends it with MooTools' methods, and returns the
extended element. You can use the methods and properties of the DOM Element object, as well as
the methods provided to you by MooTools.
MooTools also gives you the double dollar function $$() and you use it, you guessed it, to retrieve ele-
ments using CSS selectors, and you can use multiple selectors by passing them as a parameter to the
double dollar function.
$$(“.myClass”);
$$(“div”, “.myClass”, “p > div”)
One huge difference between MooTools and Prototype is you don't have to iterate over the returned
array to perform operations on them.
$$(“div”, “a”).setStyle(“color”, “red”);
This code selects all <div/> and <a/> elements in the page and sets their text color to red. Contrast that
with Prototype in the following code example:
function changeColor(item)
{
var styles = new Object();
styles.color = “red”;
item.setStyle(styles);
}
$$(“div”, “a”).each(changeColor);
So the $$() function is kind of a cross between Prototype's $$() function and jQuery's $().
MooTools has an
each()
method, too, if you wanted to perform an operation on every element in the
array.
Altering Style
The previous MooTools code example introduced you to the setStyle() method. It accepts two argu-
ments: the fi rst is the CSS property, and the second is its value. Like jQuery, you can use the CSS prop-
erty used in a style sheet or the camel-case version used in script:
$(“myDiv”).setStyle(“background-color”, “red”);
$(“myDiv”).setStyle(“backgroundColor”, “red”);
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.
This is, of course, not the ideal means of changing an element's style. MooTools adds the addClass(),
removeClass(), toggleClass(), and hasClass() methods to Element objects.
