Java Reference
In-Depth Information
element in the array, you have to iterate over the array with either a loop or an iterative
Array
method (from Chapter 5).
performing an Operation on elements Selected with $$()
Because
$$()
returns an array, you can use the
Array
methods to perform iterative operations. For
example, the following code uses the
forEach()
method to insert content into each element in the array:
function insertText(element) {
element.insert("This text inserted using the forEach() method.");
}
$$("div").forEach(insertText);
You can also use multiple CSS selectors to select elements with the
$$()
function. Instead of passing
a single string that contains the multiple selectors, you pass each selector as an argument to the
method, like this:
var elements = $$("#myDiv", "p > span, .class‐one");
This code selects elements based upon two selectors:
#myDiv
and
p > span, .class‐one
, and it
returns an array that contains all of the extended element objects that match those selectors.
Note
For more information on the CSS selectors supported in Prototype, see
manipulating style
Prototype gives you several methods you can use to change an element's style. The most basic is the
setStyle()
method, which sets individual style properties. To use
setStyle()
, you create an object
that contains the CSS properties and values that you want to set. For example, the following code
sets an element's foreground and background colors:
var styles = {
color: "red",
backgroundColor: "blue"
};
$("myDiv").setStyle(styles);
As you know from previous chapters, changing an element's style in this manner is usually
undesirable. A better solution is to manipulate the CSS classes applied to an element, and Prototype
gives you four easy‐to‐use methods to do just that.
The first method,
addClassName()
, adds a CSS class to the element. The following code adds the
class‐one
CSS class to the element:
$("myDiv").addClassName("class-one");
