Java Reference
In-Depth Information
The addClass() and removeClass() methods do just what their names imply. They add and remove
the specifi ed class to the element, as in the following code:
$(“myDiv”).addClass(“someClass”).removeClass(“someClass”);
The toggleClass() method works as you would expect; if the element has the CSS class specifi ed by
the passed parameter, then toggleClass() removes the CSS class from the element. If the element
doesn't have the CSS class, then toggleClass() adds it to the element.
$(“myDiv”).toggleClass(“myClass”).toggleClass(“myClass”);
This code fi rst adds the myClass CSS class to the element because you removed it in the previous
example. The second toggleClass() call removes it again because you just added it to the element.
The hasClass() method returns a true or false value depending on whether the element has the
CSS class or not.
$(“myDiv”).hasClass(“myClass”);
This code returns false, since the CSS class myClass isn't applied to the element.
Changing an element's style is only part of the DOM manipulation equation, and MooTools fi lls in the
other part with the ability to create, insert, and remove elements from the DOM.
Creating, Inserting, and Removing Elements
Creating elements with MooTools is very similar to creating them with Prototype. You simply use the
Element object's constructor and pass it the type of element you want to create along with an object
containing the attributes you want the element to have. The following code creates an <a/> element;
assigns its id, href, and target attributes; and adds the element to the document.
var attributes = new Object();
attributes.id = “myLink”;
attributes.href = “http://www.prototypejs.org”;
attributes.target = “_blank”;
var a = new Element(“a”, attributes).appendText(“Go to Prototype's Website”);
$(document.body).adopt(a);
The fi rst four lines of this code create an attributes object and its id, href, and target properties
and assign their values. Then a new <a/> element is created with the Element object constructor, and
text is added to the element with the appendText() method. Finally, the element is appended to the
document.body object with the adopt() method.
Removing Element objects from the DOM is quite simple and straightforward; simply call the dispose()
method. The following code demonstrates this:
$(“myLink”).dispose();
