Alphabetical Object Reference (Dynamic HTML: The Definitive Reference, 2nd Edition)

Range NN 6 IE n/a DOM 2

The W3C DOM Range object—similar in concept to the IE TextRange object—represents a sequence of zero or more rendered text characters in a document. When a text range consists of zero characters, it represents an insertion point between two characters (or before the first or after the last character of the document). The Range object automatically keeps track of the node and character offset references for the start and end points of the range, so its methods can copy existing content, delete the range's contents, or insert new contents (in node form) into the existing range while maintaining the integrity of the document tree at every step. Nodeness is important to the Range object, but most of those concerns are handled for you.

A Range object is created via the document.createTextRange( ) method or by turning a user selection into a range via window.getSelection().getRangeAt(0). Once a text range is created, use its methods to adjust its start and end point to encompass a desired segment of the text. The choose from a set of additional methods to act on the range. See Chapter 5 for details and examples of using the Range object and how its syntax varies from that of the IE TextRange object.

Object Model Reference

document.createRange( )

Object-Specific Properties

`collapsed`	`commonAncestorContainer`	`endContainer`
`endOffset`	`startContainer`	`startOffset`

Object-Specific Methods

`cloneContents( )`	`cloneRange( )`	`collapse( )`
`compareBoundaryPoints( )`	`compareNode( )`	`comparePoint( )`
`createContextualFragment( )`	`deleteContents( )`	`detach( )`
`extractContents( )`	`insertNode( )`	`intersectsNode( )`
`isPointInRange( )`	`selectNode( )`	`selectNodeContents( )`
`setEnd( )`	`setEndAfter( )`	`setEndBefore( )`
`setStart( )`	`setStartAfter( )`	`setStartBefore( )`
`surroundContents( )`	`toString( )`

Object-Specific Event Handler Properties

None.

collapsed NN 6 IE n/a DOM 2
Read-only
Returns Boolean true if the range's start and end points are at the same location, encompassing zero characters. A collapsed range can be located anywhere within the document.

Example

if (rng.collapsed) { // act on collapsed text range }

Value

Boolean value: true | false.

Default

None.

commonAncestorContainer NN 6 IE n/a DOM 2
Read-only
Returns a reference to a document tree node that is the next outermost container that encompasses the current range's start and end points. If the start and end points are, themselves, in the same node (for example, the same text node), the commonAncestorContainer property returns a reference to that node's parent node. IE TextRange equivalent is parentElement( ).

Example

var containingElem = rng.commonAncestorContainer;

Value

Reference to a node object (commonly an element node type).

Default

None.

endContainer NN 6 IE n/a DOM 2
Read-only
Returns a reference to a document tree node that contains the current range's end point.

Example

var containingElemRight = rng.endContainer;

Value

Reference to a node object.

Default

None.

endOffset NN 6 IE n/a DOM 2
Read-only
Returns an integer count of characters or nodes for the end point's location within the node reported by the endContainer property. If the endContainer is a text node, the endOffset property counts the number of characters to the right of the first character of that text node. If the endContainer is an element node, the endOffset property counts the number of nodes between the start of the containing node's content and the end point.
As an example, consider the following document segment that shows a text range in boldface characters, with the start and end points signified by pipe characters:
One paragraph with |a nested| element inside.
Note that the start point is within a text node, while the end point sits just outside the span element end tag. The Range object's properties report values as shown in the following table.

Property

Value

Description

commonAncestorContainer

[object HTMLParagraphElement]

The p element embraces both the start and end points.

startContainer

[object Text]

Start point is within a text node.

startOffset

19

Start point is at the 20th (zero-based index of 19) character from the start of its container, the text node.

endContainer

[object HTMLParagraphElement]

End point is designated as the end of the span element, which makes the next outer p element the end point's container.

endOffset

2

End point is at the 3rd (zero-based index of 2) node in the context of its endContainer p element (first node is a text node; second node is the span element; end point is at the start of the third node of the p element).

Example

var rngEndOff = rng.endOffset;

Value

Integer.

Default

None.

startContainer NN 6 IE n/a DOM 2
Read-only
Returns a reference to a document tree node that contains the current range's start point.

Example

var containingElemLeft = rng.startContainer;

Value

Reference to a node object.

Default

None.

startOffset NN 6 IE n/a DOM 2
Read-only
Returns an integer count of characters or nodes for the start point's location within the node reported by the startContainer property. If the startContainer is a text node, the startOffset property counts the number of characters to the right of the first character of that text node. If the startContainer is an element node, the startOffset property counts the number of nodes between the start of the containing node's content and the start point. See endOffset for more details.

Example

var rngStartOff = rng.startOffset;

Value

Integer.

Default

None.

cloneContents( ) NN 7 IE n/a DOM 2
Returns a DocumentFragment node containing a copy of the contents from the current range. Any dangling nodes are resolved as part of the cloning process.

Returned Value

Reference to a node of a document fragment type.

Parameters

None.

cloneRange( ) NN 6 IE n/a DOM 2
Returns a Range object that is a carbon copy of the current range, including references to associated containers. This method lets you preserve a copy of a Range object's specifications while creating a new Range object. Similar to the IE TextRange object's duplicate( ) method.

Returned Value

Reference to a Range object.

Parameters

None.

collapse( ) NN 6 IE n/a DOM 2
collapse(toStartFlag)
Shrinks the current range to an insertion point (start and end points are in the same node at the same offset). The Boolean parameter controls whether the range collapses to the start point (true) or end point (false) of the current range. A script working its way through a document (e.g., using the String.indexOf( ) method to search for the next instance of a string) usually collapses to the end point before shifting the end point to the end of the body to perform the next String.indexOf( ) search.

Returned Value

None.

Parameters

toStartFlag

Boolean value that controls whether collapse occurs at the start point (true) or end point (false) of the current range.

compareBoundaryPoints( ) NN 6 IE n/a DOM 2
compareBoundaryPoints(compareType, sourceRangeRef)
Returns an integer code indicating the relative positioning of one boundary point of the current range's against a boundary point of a different text range. In the simplest case, the two end points (one from each range) share the same ancestor container. In such a case, the first parameter determines which end points from the two ranges get compared. Use the constants supplied with every Range object, as shown in the following table.

Comparison type

Description

rng.START_TO_START

Comparing the start position of the current range against the start position of the source range

rng.START_TO_END

Comparing the start position of the current range against the end position of the source range

rng.END_TO_END

Comparing the end position of the current range against the end position of the source range

rng.END_TO_START

Comparing the end poisition of the current range against the start position of the source range

If the first boundary in the comparison occurs earlier in the document than the second boundary, the returned value is -1; if the first boundary comes after the second boundary, the returned value is 1; if the two boundaries are in the identical position, the returned value is 0. Similar to the IE TextRange object's compareEndPoints( ) method.
But the situation can be more complex if the boundary points being compared have different ancestor container nodes. The offset values with respect to container nodes influence the comparison results. Due to the variety of results that can occur with numerous relationships between the compared end points, your scripts will need to perform an intricate analysis of boundaries to assure comparisons report the desired sequence. On the other hand, simply looking for unanimity of boundary points is a much simpler prospect. You may prefer to limit your comparisons to looking only for return values of zero (or any other value) for a more binary determination of boundary comparisons.

Returned Value

Integer values -1, 0, or 1.

Parameters

compareType

Integer values from 0 to 3 corresponding to comparison types. Integer values are not aligned with the W3C DOM standard in Netscape 6 or 7, but the plain-language constants (such as rng.START_TO_START, shown in the table above) produce the correct comparisons.

sourceRangeRef

Reference to a second, previously defined Range object, perhaps preserved through the cloneRange( ) method.

compareNode( ) NN 6 IE n/a DOM n/a
compareNode(nodeReference)
A Netscape-only method that returns an integer code indicating the relative position of some other node with respect to the current range. Four plain-language constants are members of every Netscape Range object, and can be used for comparisons of values returned by the compareNode( ) method. Note that the returned values are from the point of view of the node passed as a parameter, rather than from that of the current range.
Returned values and constants are as follows.

Constant

Value

Description

rng.NODE_BEFORE

0

Entire node comes before the range.

rng.NODE_AFTER

1

Entire node comes after the range.

rng.NODE_BEFORE_AND_AFTER

2

Node starts before the current range and ends after it.

rng.NODE_INSIDE

3

Node is contained in its entirety within the scope of the range.

By way of example:
if (rng.compareNode(document.getElementById("myElem")) == rng.NODE_INSIDE) { // process for myElem node being contained by the range }

Returned Value

Integer values 0, 1, 2, or 3.

Parameters

nodeReference

Reference to any node in the document tree.

comparePoint( ) NN 6 IE n/a DOM n/a
compareNode(nodeReference, offset)
A Netscape-only method that returns an integer code indicating the relative position of some other node and offset within that node with respect to the current range. Note that the returned values are from the point of view of the node (more specifically, the point signified by the offset within the node) passed as parameters, rather than from that of the current range.
Returned values are as follows.

Value

Description

-1

Point comes before the start of the range.

0

Point is located within the range.

1

Point comes after the end of the range.

By way of example:
if (rng.comparePoint(document.getElementById("myElem"), 2) == 0) { // process for offset of 2 within myElem node being contained by the range }

Returned Value

Integer values -1, 0, 1.

Parameters

nodeReference

Reference to any node in the document tree.

offset

Integer offset, counting either nested nodes within an element or characters within a text node.

createContextualFragment( ) NN 6 IE n/a DOM n/a
createContextualFragment(contentString)
The createContextualFragment( ) method was initially designed as an alternative to the innerHTML convenience property (because the W3C DOM provides little in the way of support for content strings consisting of tags). This method accepts any string—including tagged content—as a parameter, and returns a DocumentFragment type of node, ready for appending or inserting into the document tree. Subsequent adoption of the innerHTML property by the Mozilla browser makes this method redundant, except that it is more consistent with the overall nodeness of the W3C DOM.

Returned Value

Reference to a document fragment type of node outside of the document tree. This node can then be applied to the document tree.

Parameters

contentString

Document content in string form, including tags and attributes.

deleteContents( ) NN 6 IE n/a DOM 2
Removes the contents of the current text range from the document tree. If the range is an element node (e.g., with boundaries established via the selectNode( ) method), invoking deleteContents( ) on the range removes the node from the document tree and collapses the range. The Range object remains in memory, but without any content. If you want to capture the content prior to its deletion, do so with other Range object methods (such as cloneRange( ) and, when it works correctly, cloneContents( )).

Returned Value

None.

Parameters

None.

detach( ) NN 6 IE n/a DOM 2
Destroys the current Range object to the extent that invoking most methods on the object or accessing its properties throw a RangeException of type INVALID_STATE_ERR.

Returned Value

None.

Parameters

None.

extractContents( ) NN 6 IE n/a DOM 2
Returns a DocumentFragment node containing the contents of the current range, after removing the contents from the document tree. Not working in Netscape as of Version 6.2 except when the range boundaries are set via the selectNodeContents( ) method.

Returned Value

Reference to a node of a document fragment type.

Parameters

None.

insertNode( ) NN 6 IE n/a DOM 2
insertNode(nodeReference)
Inserts a node at the start of the current text range. Most useful when the range is already collapsed as a text insertion pointer. The node being inserted can be created fresh (via document.createElement( )) or fetched from elsewhere in the document tree, in which case it is removed from its old position and inserted into the current range. If you insert a text node adjacent to a spot that also happens to be an existing text node, you can wind up with two adjacent text nodes. Invoke the normalize( ) method on the parent to consolidate the text nodes.

Returned Value

Nothing

Parameters

nodeReference

Reference to any text, element, or document fragment node to be inserted into the range.

intersectsNode( ) NN 6 IE n/a DOM n/a
intersectsNode(nodeReference)
Returns Boolean true if any part of the current range overlaps with the text or element node that is passed as a parameter. If your script detects an intersection, it can use the compareNode( ) method to obtain more detail about the intersection.

Returned Value

Boolean value: true | false.

Parameters

nodeReference

Reference to any text or element in the document tree.

isPointInRange( ) NN 6 IE n/a DOM n/a
isPointInRange(nodeReference, offset)
Returns Boolean true if the location denoted by the parameter values (a node in the document tree and an offset location within that node) is within the current range.

Returned Value

Boolean value: true | false.

Parameters

nodeReference

Reference to any text or element in the document tree.

offset

Integer offset, counting either nested nodes within an element or characters within a text node.

selectNode( ), selectNodeContents( ) NN 6 IE n/a DOM 2
selectNode(nodeReference) selectNodeContents(nodeReference)
Sets the range's boundary points to encompass a node or just the node's contents. Despite the methods' names, no body text in the rendered document is highlighted.
Your choice of method impacts the way the range's startContainer and endContainer properties are filled. In the following sequence, you see what happens to the range and its properties when an element node and a text node are parameters to these methods. The initial HTML segment is:
One paragraph with a nested element inside.
Selecting the span element (with the rng.selectNode(document.getElementById("myspan")) method) sets the range to:
One paragraph with a |nested| element inside.
The Range object's properties report values as follows.

Property

Value

Description

startContainer

[object HTMLParagraphElement]

Start point is right before the span element.

startOffset

1

Start point is at the 2nd (zero-based index of 1) node inside the p element.

endContainer

[object HTMLParagraphElement]

End point is immediately after the span element.

endOffset

2

End point is at the 3rd (zero-based index of 2) node in the context of its endContainer p element.

Using the rng.selectNodeContents(document.getElementById("myspan")) method to select the span element's contents sets the range to:
One paragraph with a |nested| element inside.
The Range object's properties report values as follows.

Property

Value

Description

startContainer

[object HTMLSpanElement]

Start point is just inside the span element.

startOffset

0

Start point is at the 1st (zero-based index of 0) node inside the span element.

endContainer

[object HTMLSpanElement]

End point is immediately after the span element's content.

endOffset

1

End point is at a position where the 2nd (zero-based index of 1) node, if present, would be in the context of its endContainer span element.

Using the rng.selectNode(document.getElementById("myspan").firstChild) method to select the text node inside the span element sets the range to:
One paragraph with a |nested| element inside.
Even though the node passed as a parameter is different (and a different node type), the new range selection looks the same as the previous one. In fact, due to the way the node tree is structured, the Range object's properties report identical values as follows.

Property

Value

Description

startContainer

[object HTMLSpanElement]

Start point is just inside the span element.

startOffset

0

Start point is at the 1st (zero-based index of 0) node inside the span element.

endContainer

[object HTMLSpanElement]

End point is immediately after the span element's content.

endOffset

1

End point is at a position where the 2nd (zero-based index of 1) node, if present, would be in the context of its endContainer span element.

Using the rng.selectNodeContents(document.getElementById("myspan")) method to select the contents of the text node inside the span element sets the range to:
One paragraph with a ||nested element inside.
In other words, the range collapses to an insertion point at the start of the text node (this may be a bug in Netscape 6), and the text node becomes the container, as shown in the following property enumeration.

Property

Value

Description

startContainer

[object Text]

Start point is at the beginning of the text node.

startOffset

0

Start point is at the 1st (zero-based index of 0) position of the text node.

endContainer

[object Text]

End point is collapsed.

endOffset

0

End point is collapsed.

Element nodes tend to be the most practical parameter values to pass to either method.

Returned Value

None.

Parameters

nodeReference

Reference to any text or element in the document tree.

setEnd( ), setStart( ) NN 6 IE n/a DOM 2
setEnd(nodeReference, offset) setStart(nodeReference, offset)
Establish the document tree locations for the individual boundary points of an existing Range object. Similar to the IE TextRange object's setEndPoint( ) method. The mapping of a location relies upon a node reference and an offset value relative to that node's starting point and type. Offset values count child nodes when the nodeReference is an element node; they count characters when the nodeReference is a text node. To set a boundary at a node edge, the associated methods (setEndAfter( ) and three others) are more convenient.

Returned Value

None.

Parameters

nodeReference

Reference to any element or text node in the document tree.

offset

Integer offset, counting either nested nodes within an element or characters within a text node.

setEndAfter( ), setEndBefore( ), setStartAfter( ), setStartBefore( ) NN 6 IE n/a DOM 2
setEndAfter(nodeReference) setEndBefore(nodeReference) setStartAfter(nodeReference) setStartBefore(nodeReference)
Establish the document tree locations for the individual boundary points of an existing Range object with respect to a node's edges. These methods assume that you are interested in setting a range's boundaries to places immediately before or after an existing node, and not concerned with other kinds of offsets. Range boundaries do not have to be symmetrical, allowing you to specify the start boundary relative to one node and the end boundary relative to a completely different node later in the document.

Returned Value

None.

Parameters

nodeReference

Reference to any element or text node in the document tree.

surroundContents( ) NN 7 IE n/a DOM 2
surroundContents(parentNodeReference)
Encapsulates the current range with a new container, usually a new element node created via the document.createElement( ) method. End points of the current range should have the same parent container prior to applying this method.

Returned Value

None.

Parameters

parentNodeReference

Reference to a node that becomes the new containing parent for the range.

toString( ) NN 6 IE n/a DOM 2
Returns a string of the body content contained by the range. No tags or attributes accompany the returned value.

Returned Value

String.

Parameters

None.

RangeException NN n/a IE n/a DOM 2

Some operations on W3C DOM Range objects can trigger errors, or, in the vernacular of JavaScript 1.5, throw exceptions if something goes wrong. The W3C DOM defines an object that conveys a code number corresponding to a well-defined, if somewhat limited, list of exceptions specifically related to Range objects. For example, if you attempt to set range boundaries to encompass non-content-related nodes (such as an Attr node), the selectNode( ) method with such a node as a parameter throws an exception whose code number is 2. This number corresponds to the exception that signals an attempt to perform an illegal or logically impossible action on a text range.

When eventually implemented in browsers, the scripting mechanism to work with range exceptions should be the same as described for the DOMException object. Range object property and method access can also throw DOMException s.

Object Model Reference

errorObjectReference

Object-Specific Properties

code

Object-Specific Methods

None.

Object-Specific Event Handler Properties

None.

code NN n/a IE n/a DOM 1
Read-only
Provides the integer corresponding to one of the defined Range object error types, as shown in the following table.

Code

Constant

Most Likely Cause

1

BAD_BOUNDARYPOINTS_ERR

The surroundContents( ) method was applied to a range with a nonapplicable end point

2

INVALID_NODE_TYPE_ERR

The method tried to work in a nonapplicable type of node

Value

Integer

Default

Determined by error.

rows NN 6 IE 4 DOM 1

Provides a collection of all tr element objects contained in a single table, tbody, tfoot, or thead element object. The rows collection of a table element includes all rows of the table, regardless of row groups. Collection members are sorted in source code order. Internet Explorer lets you use array notation or parentheses to access a single row in the collection (e.g., document.getElementById("myTable").rows[0], document.all.myTable.rows (0)).

Object Model Reference

document.getElementById("tableOrSectionID").rows

Object-Specific Properties

length

Object-Specific Methods

item( )

namedItem( )

tags( )

urns( )

Object-Specific Event Handler Properties

None.

length NN 6 IE 4 DOM 1
Read-only
Returns the number of elements in the collection.

Example

var howMany = document.getElementById("myTable").rows.length;

Value

Integer.

item( ) NN 6 IE 4 DOM 1
item(index[, subindex]) item(index)
Returns a single tr object or collection of tr objects corresponding to the element matching the index value (or, optionally in IE, the index and subindex values).

Returned Value

One tr object or collection (array) of tr objects. If there are no matches to the parameters, the returned value is null.

Parameters

index

When the parameter is a zero-based integer, the returned value is a single element corresponding to the specified item in source code order (nested within the current element); when the parameter is a string (IE only), the returned value is a collection of elements with id properties that match that string.

subindex

In IE only, if you specify a string value for the first parameter, you can use the second parameter to specify a zero-based index that retrieves the specified element from the collection with id properties that match the first parameter's string value.

namedItem( ) NN 6 IE 6 DOM 1
namedItem("ID")
Returns a single tr object or collection of tr objects corresponding to the element matching the parameter string value.

Returned Value

One tr object or collection (array) of tr objects. If there are no matches to the parameters, the returned value is null.

Parameters

ID

The string that contains the same value as the desired element's id attribute.

tags( ) NN n/a IE 4 DOM n/a
tags(tagName)
Returns a collection of objects (among all objects within the current collection) with tags that match the tagName parameter. Redundant here, because all elements have the same tr tag.

Returned Value

A collection (array) of objects. If there are no matches to the parameters, the returned value is an array of zero length.

Parameters

tagName

This involves a string of the all-uppercase version of the element tag, for example, document.getElementById("myTable").rows.tags("tr").

urns( ) NN n/a IE 5(Win) DOM n/a
urns(URN)
See the all.urns( ) method.

rb, ruby, rt NN n/a IE 5 DOM n/a

Of these three ruby text-related elements, only ruby and rt are officially supported as objects in the IE DOM. But an rb element (even though it has no structural or rendering powers as of IE 6) is also regarded as an element object. Even Netscape 6 sees these as valid HTML element objects (of unknown type). See the ruby element in Chapter 8 for details on the usage of these elements. As scriptable objects, they have no properties or methods beyond a generic HTML element object.

Object Model Reference

document.getElementById("elementID")

Object-Specific Properties

None.

Object-Specific Methods

None.

Object-Specific Event Handler Properties

None.

screen NN 4 IE 4 DOM n/a

The screen object refers to the video display on which the browser is being viewed. Many video control panel settings influence the property values, but only a handful of properties are shared among browser brands.

Object Model Reference

NN: screen
IE: [window.]screen

Object-Specific Properties

`availHeight`	`availLeft`	`availTop`	`availWidth`
`bufferDepth`	`colorDepth`	`deviceXDPI`	`deviceYDPI`
`fontSmoothingEnabled`	`height`	`logicalXDPI`	`logicalYDPI`
`pixelDepth`	`updateInterval`	`width`

Object-Specific Methods

None.

Object-Specific Event Handler Properties

None.

availHeight, availWidth NN 4 IE 4 DOM n/a
Read-only
Provide the height and width of the content region of the user's video monitor in pixels. This measure does not include the 24-pixel task bar (Windows) or 20-pixel system menubar (Macintosh). IE/Macintosh miscalculates the height of the menu bar as 24 pixels. To use these values in creating a pseudo-maximized window, you also have to adjust the top-left position of the window.

Example

var newWind = window.open("","","height=" + screen.availHeight + ",width=" + screen.availWidth)

Value

Integer of available pixels in vertical and horizontal dimensions.

Default

Depends on the user's monitor size.

availLeft, availTop NN 4 IE n/a DOM n/a
Read-only
Provide the pixel coordinates of the left and top edges of the screen that is available for content. With the standard Windows Taskbar arrangement, both values are zero. But drag the Taskbar to the left or top of the screen, and the corresponding value increases to accommodate the bar's space. Navigator 4 for the Macintosh doesn't start its screen counting until just below the fixed menu bar, but for Netscape 6, the availTop property returns 20 for the menu bar height.

Example

window.moveTo(screen.availLeft, screen.availTop);

Value

Integer.

Default

0 (Windows); 20 (Macintosh)

bufferDepth NN n/a IE 4 DOM n/a
Read/Write
Specifies the setting of the offscreen bitmap buffer. Path animation smoothness may improve on some clients if you match the bufferDepth to the colorDepth values. Setting the bufferDepth to -1 forces IE to buffer at the screen's pixel depth (as set in the control panel), and colorDepth is automatically set to that value, as well (plus if a user changes the bits per pixel, the buffer is adjusted accordingly). A setting to any of the other permitted values (1, 4, 8, 15, 16, 24, or 32) buffers at that pixel depth and sets the colorDepth to that value. The client's display must be set to the higher bits-per-pixel values to take advantage of the higher settings in scripts.

Example

screen.bufferDepth = 4;

Value

Any of the following allowed integers: -1 | 0 | 4 | 8 | 15 | 16 | 24 | 32.

Default

0

colorDepth NN 4 IE 4 DOM n/a
Read-only
Returns the number of bits per pixel used to display color in the video monitor or image buffer. Although this property is read-only, its value can be influenced by settings of the bufferDepth property (IE only). You can determine the color depth of the current video screen and select colors accordingly.

Example

if (screen.colorDepth > 8) { document.getElementById("pretty").color = "cornflowerblue"; } else { document.getElementById("pretty").color = "blue"; }

Value

Integer.

Default

Current video control panel setting.

deviceXDPI, deviceYDPI, logicalXDPI, logicalYDPI NN n/a IE 6(Win) DOM n/a
Read-only
All four properties concern themselves with the dots-per-inch resolution of display screens along the horizontal (x) and vertical (y) axes. A device density property returns the actual pixel density of the current display screen, as detected by the operating system. The logical density is the "normal" pixel density that most users and page authors work with (typically 96 dots per inch horizontally and vertically). These two sets of properties let scripts examine whether the user has a higher-than-usual pixel density display, which could make fixed-size items, such as images and pixel-sized fonts, appear uncomfortably small on the screen. In such cases, scripts can determine a scaling factor between the device and logical densities, and apply that factor to the style.zoom property of critical elements (or the entire document.body, for that matter). Users of high-density display systems may already have their IE application preferences set to automatic scaling, so these calculations aren't necessary.

Example

var normDPI = 96; if ((screen.deviceXDPI == screen.logicalXDPI) && (screen.deviceXDPI > normDPI)) { document.body.style.zoom = normDPI / screen.logicalXDPI; }

Value

Integer.

Default

96

fontSmoothingEnabled NN n/a IE 4(Win) DOM n/a
Read-only
Returns Boolean true if the user has enabled Smooth Edges for fonts in the Windows Display control panel. The setting may influence the font-related style sheet you link into a document.

Example

var styleFile = "css/corpStyle.css"; if (screen.fontSmoothingEnabled) { styleFile = "css/corpStyleFancy.css"; } document.write("<link type='text/css' rel='stylesheet' href='" + styleFile + "'>");

Value

Boolean value: true | false.

Default

false

height, width NN 4 IE 4 DOM n/a
Read-only
Return the number of pixels available vertically and horizontally in the client video monitor. This is the raw dimension. For the amount of screen space not covered by system bars, see availHeight and availWidth.

Example

if (screen.height > 480 && screen.width > 640) { ... }

Value

Integer of pixel counts.

Default

Depends on video monitor.

logicalXDPI, logicalYDPI
See deviceXDPI.

pixelDepth NN 4 IE n/a DOM n/a
Read-only
Returns the number of bits per pixel used to display color in the video monitor. This value is similar to the colorDepth property, but it is not influenced by a potential custom color palette, as colorDepth is.

Example

if (screen.pixelDepth > 8) { document.getElementById("pretty").color = "cornflowerblue"; } else { document.getElementById("pretty").color = "blue"; }

Value

Integer.

Default

Current video control panel setting.

updateInterval NN n/a IE 4 DOM n/a
Read/Write
Provides the time interval (in milliseconds) between screen updates. A value of zero lets the browser select an average that usually works best. The longer the interval, the more animation steps may be buffered and then ignored as the update fires to display the current state.

Example

screen.updateInterval = 0;

Value

Positive integer or zero.

Default

0

width
See height.

script NN 6 IE 4 DOM 1

The script object reflects the script element. Internet Explorer 4 for Windows chokes on accessing or setting the innerHTML or innerText properties, but the equivalent text property is safe. IE 5 for the Macintosh implements the readyState property (shared among all elements in IE for Windows) for this object.

HTML Equivalent

<script>

Object Model Reference

[window.]document.getElementById("elementID")

Object-Specific Properties

charset

defer

event

htmlFor

src

text

type

Object-Specific Methods

None.

Object-Specific Event Handler Properties

Handler	NN	IE	DOM
`onerror`	n/a	4	n/a
`onload`	n/a	4	n/a

charset NN 6 IE 6(Win) DOM 1
Read/Write
Indicates the character encoding of the script content.

Example

if (document.getElementById("myScript").charset == "csISO5427Cyrillic") { // process for Cyrillic charset }

Value

Case-insensitive alias from the character set registry (ftp://ftp.isi.edu/in-notes/iana/assignments/character-sets).

Default

Determined by browser.

defer NN 6 IE 4 DOM 1
Read/Write
Specifies whether the browser should proceed with rendering regular HTML content without looking for the script to generate content as the page loads. This value needs to be set in the script element's tag at runtime. When this property is set to true by the addition of the DEFER attribute to the tag, the browser does not have to hold up rendering further HTML content to parse the content of the script element in search of document.write( ) statements. Changing this property's value after the document loads does not affect the performance of the script or browser. Although Netscape 6 implements the property, it is not functional.

Example

if (document.getElementById("myScript").defer = = "true") { ... }

Value

Boolean value: true | false.

Default

false

event NN 6 IE 4 DOM 1
Read-only
Internet Explorer's event model allows binding of object events to script elements with the help of the event and for attributes (see Chapter 6). The event property returns the setting for the event attribute. Not functional in Netscape 6.

Example
if (document.getElementById("gizmoScript").event == "onresize") {
    ...
}
Value

Case-sensitive event name string.

Default

None.

htmlFor NN 6 IE 4 DOM 1
Read-only
Returns the value (element ID) assigned to the for attribute of a script element. This attribute points to the ID of the element to which the script is bound when a specific event (set by the event attribute) fires for the element. Not functional in Netscape 6.

Example

if (document.getElementById("helpScript").htmlFor == "helpButton") { ... }

Value

String.

Default

None.

src NN 6 IE 4 DOM 1
Read/Write
Provides the URL of the .js script file imported into the current script element. If you assign a new .js file to an existing script element in IE, the previous .js file's scripts do not disappear. But any duplications of variable or functions names are overwritten by the definitions from the new file. While Netscape 6 and later do not complain when you assign a new value to this property, the assignment does not necessarily load the new scripts into the current window or frame.

Example

if (document.getElementsByTagName("script")[1].src == "scripts/textlib.js") { ... }

Value

Complete or relative URL as a string.

Default

None.

text NN 6 IE 4 DOM 1
Read/Write
Indicates the text content of the element. Assigning script statements to this object has different results in various browsers. In late versions of IE for Windows, the new value is added to the existing script, even though the property no longer reports the previous script text; in Netscape 6, the assigned values are ignored; and in IE 5 for Macintosh, the property is treated as read-only.

Example

var scriptText = document.getElementById("script3").text;

Value

String.

Default

None.

type NN 6 IE 4 DOM 1
Read-only
Provides an advisory about the content type of the script statements. The content type should tell the browser which scripting engine to use to interpret the script statements, such as text/javascript. The type attribute may eventually replace the language attribute as the one defining the scripting language in which the element's statements are written.

Example

var scriptMIMEtype = document.getElementById("script3").type;

Value

String.

Default

None.

scripts NN n/a IE 4 DOM n/a

A collection of all scripts defined or imported in a document, including those defined in the head or body portion. Collection members are sorted in source code order.

Object Model Reference

document.scripts

Object-Specific Properties

length

Object-Specific Methods

item( )

namedItem( )

tags( )

urns( )

Object-Specific Event Handler Properties

None.

length NN n/a IE 4 DOM n/a
Read-only
Returns the number of elements in the collection.

Example

var howMany = document.scripts.length;

Value

Integer.

item( ) NN n/a IE 4 DOM n/a
item(index[, subindex])
Returns a single object or collection of objects corresponding to the element matching the index value (or, optionally, the index and subindex values).

Returned Value

One object or collection (array) of objects. If there are no matches to the parameters, the returned value is null.

Parameters

index

When the parameter is a zero-based integer, the returned value is a single element corresponding to the said numbered item in source code order (nested within the current element). When the parameter is a string, the returned value is a collection of elements with id properties that match that string.

subindex

If you specify a string value for the first parameter, you may use the second parameter to specify a zero-based integer to retrieve a specific element from the collection with id properties that match the first parameter's string value.

namedItem( ) NN n/a IE 6 DOM n/a
namedItem("ID")
Returns a single script object or collection of script objects corresponding to the element matching the parameter string value.

Returned Value

One script object or collection (array) of script objects. If there are no matches to the parameters, the returned value is null.

Parameters

ID

The string that contains the same value as the desired element's id attribute.

tags( ) NN n/a IE 4 DOM n/a
tags(tagName)
Returns a collection of objects (among all objects within the current collection) with tags that match the tagName parameter. Redundant here, because all elements have the same script tag.

Returned Value

A collection (array) of objects. If there are no matches to the parameters, the returned value is an array of zero length.

Parameters

tagName

A string of the all-uppercase version of the element tag, as in document.scripts.tags("script").

urns( ) NN n/a IE 5(Win) DOM n/a
urns(URN)
See the all.urns( ) method.

select NN 2 IE 3 DOM 1

The select object reflects the select element. This element is a form control that contains option elements. Note that the innerHTML and innerText properties are not available on the Macintosh version of Internet Explorer 4. The shared disabled property is available for Netscape 6.

HTML Equivalent

<select>

Object Model Reference

[window.]document.formName.selectName
[window.]document.forms[i].elements[i]
[window.]document.getElementById("elementID")

Object-Specific Properties

`dataFld`	`dataSrc`	`form`	`length`	`multiple`	`name`
`options[]`	`selectedIndex`	`size`	`type`	`value`

Object-Specific Methods

add( )

item( )

namedItem( )

remove( )

Object-Specific Event Handler Properties

Handler	NN	IE	DOM
`onblur`	2	4	n/a
`onchange`	2	4	n/a
`onfocus`	2	4	n/a

dataFld NN n/a IE 4 DOM n/a
Read/Write
Used with IE data binding to associate a remote data source column name with the selectedIndex property of the select object. A datasrc attribute must also be set for the element. Setting both the dataFld and dataSrc properties to empty strings breaks the binding between element and data source. Works only with text file data sources in IE 5/Mac.

Example

document.forms[0].mySelect.dataFld = "choice";

Value

Case-sensitive identifier of the data source column.

Default

None.

dataSrc NN n/a IE 4 DOM n/a
Read/Write
Used with IE data binding to specify the ID of the page's object element that loads the data source object for remote data access. Setting both the dataFld and dataSrc properties to empty strings breaks the binding between element and data source. Works only with text file data sources in IE 5/Mac.

Example

document.forms[0].mySelect.dataSrc = "DBSRC3";

Value

Case-sensitive identifier of the data source.

Default

None.

form NN 2 IE 3 DOM 1
Read-only
Returns a reference to the form element that contains the current element. When processing an event from this element, the event handler function automatically has access to the select element (as the event object's target or srcElement property). By reading the form property, the script can easily access other controls within the same form.

Example

var theForm = evt.srcElement.form;

Value

form element object reference.

Default

None.

length NN 2 IE 3 DOM 1
Read/Write
The number of option objects nested inside the select object. The value returned is the same as the select object options.length property, and can be safely used as a for loop maximum counter value to iterate through the nested option objects. The W3C DOM specifies that this property is read-only, but because the property has been read/write for some time in mainstream browsers, you can continue to adjust this value. By and large, the only modification made to this property, if at all, should be setting its value to zero to empty all options from the select object. Better still, if you are authoring for IE 5 and later or Netscape 6, use the select.remove( ) and select.add( ) methods to modify the contingent of option elements nested inside the select element.

Example

document.forms[0].mySelect.length = 0;

Value

Integer.

Default

None.

multiple NN 6 IE 4 DOM 1
Read/Write
Specifies whether the browser should render the select element as a list box and allow users to make multiple selections from the list of options. By default, the size property is set to the number of nested option elements, but the value may be overridden with the size property setting. To change a scrolling pick list to a popup menu, set the multiple property to false and the size property to 1. Users can select contiguous items by Shift-clicking on the first and last items of the group. To make discontiguous selections, Windows users must Ctrl-click on each item; Mac users must Command-click on each item. The multiple property has no effect when size is set to 1 to display a popup menu.

Example

if (document.entryForm.list3.multiple) { ... }

Value

Boolean value: true | false.

Default

false

name NN 2 IE 3 DOM 1
Read/Write
This is the identifier associated with the form control. The value of this property is submitted as one-half of the name/value pair when the form is submitted to the server. Names are hidden from user view, since control labels are assigned via other means, depending on the control type. Form control names may also be used by script references to the objects. Despite the modern standards' preference for the id attribute, many browsers still require that a control be assigned a name attribute to allow the control's value to be submitted.

Example

document.orderForm.payment.name = "credcard";

Value

Case-sensitive string identifier that follows the rules of identifier naming: it may contain no whitespace, cannot begin with a numeral, and should avoid punctuation except for the underscore character.

Default

None.

options[ ] NN 2 IE 3 DOM 1
Read-only
Returns an array of all option objects contained by the current element. Items in this array are indexed (zero-based) in source code order. For details on using this collection in a backward-compatible way for adding and removing option elements from a select element, see the options object. Loop through this collection in select elements set for multiple selections.

Example

var selVals = new Array( ); for (var i = 0; i < document.forms[0].mySelect.length; i++) { if (document.forms[0].mySelect.options[i].selected) { selVals[selVals.length] = document.forms[0].mySelect.options[i].value; } }

Value

Array of option objects.

Default

None.

selectedIndex NN 2 IE 3 DOM 1
Read/Write
This is the zero-based integer of the option selected by the user. If the select element is set to allow multiple selections, the selectedIndex property returns the index of the first selected item (see the selected property). You can use this property to gain access to the value or text of the selected item, as shown in the example.
In recent browsers, if no option is selected, the selectedIndex property returns -1. Setting the value to -1 to deselect all items works as you'd expect in IE 5 and later for Windows. For Netscape 6, setting the property to -1 may not empty the displayed option, but it does effectively deselect all items for a submitted form.

Example

var list = document.forms[0].selectList; var listText = list.options[list.selectedIndex].text;

Value

Integer.

Default

None.

size NN 6 IE 4 DOM 1
Read/Write
Controls the number of rows displayed in a scrolling pick list, reflecting the size attribute of the select element. When set to true, the multiple property overrides a size value set to fewer than the number of options. To change a scrolling pick list to a popup menu, set the multiple property to false and the size property to 1.

Example

document.forms[0].choices.size = 6;

Value

Integer.

Default

None.

type NN 3 IE 4 DOM 1
Read-only
Returns the type of form control element. A select object has two possible values, depending on whether the element is set to be a multiple-choice list. The value is returned in all lowercase letters. It may be necessary to cycle through all form elements in search of specific types to do some processing on (e.g., emptying all form controls of type "text" while leaving other controls untouched).
Note that Navigator 4 incorrectly reports a select object's type as select-multiple if the element's size attribute is set to any value larger than 1, even if the multiple attribute is not set. This is fixed in Netscape 6.

Example

if (document.forms[0].elements[3].type == "select-multiple") { ... }

Value

Any of the following constants (as a string): button | checkbox | file | hidden | image | password | radio | reset | select-multiple | select-one | submit | text | textarea.

Default

Depends on value of multiple.

value NN 6 IE 4 DOM 1
Read/Write
This is the current value associated with the form control that is submitted with the name/value pair for the element. All values are strings, but they may represent other kinds of data, including Boolean and numeric values. For browsers earlier than IE 4 and Netscape 6, scripts must retrieve the selected option's value by using the select object's selectedIndex property as an index into the options array, then inspect each option object's selected property to find the true one(s).

Example

if (document.forms[0].medium.value == "CD-ROM") { ... }

Value

String.

Default

None.

add( ) NN 6 IE 5 DOM 1
add(newOptionElement[, positionIndex]) add(newOptionElement, optionElementReference)
Adds a new option element to the current select element. Unfortunately, IE and Netscape 6 don't agree on the parameter values for this method. While all browsers require a reference to a newly created option element (the value returned from a document.createElement("option") method is appropriate for that), the second parameter varies with browser. In IE, the second parameter is optional and supplies a numeric index to the existing option element; the new option is inserted in front of that element. With no second parameter, the new option is appended to the existing option elements. In Netscape 6 (which implements the W3C DOM recommendation from the unfinished HTML module), the second parameter is required. The parameter is either a reference to an existing option element (the new option is inserted before that referenced option) or null (the new option is appended to the existing options).

Returned Value

None.

Parameters

newOptionElement

Reference to an option element created by script, usually with the document.createElement( ) method.

positionIndex

Optional IE integer parameter signifying the existing nested option element in front of which the new option is to be inserted. Omitting this parameter causes the new option to be appended to the end of the options list.

optionElementReference

Reference to an option element in front of which the new option is to be inserted. You may also use null to append the new option to the end of the option list.

item( ) NN n/a IE 5 DOM n/a
item(index[, subindex])
Returns a single nested option object or collection of nested option objects corresponding to the element matching the index value (or, optionally, the index and subindex values).

Returned Value

One object or collection (array) of objects. If there are no matches to the parameters, the returned value is null.

Parameters

index

When the parameter is a zero-based integer, the returned value is a single element corresponding to the said numbered item in source code order (nested within the current element). When the parameter is a string, the returned value is a collection of elements with id properties that match that string.

subindex

If you specify a string value for the first parameter, you may use the second parameter to specify a zero-based integer to retrieve a specific element from the collection with id properties that match the first parameter's string value.

namedItem( ) NN n/a IE 6 DOM n/a
namedItem("ID")
Returns a single nested option object or collection of nested option objects corresponding to the element matching the parameter string value.

Returned Value

One option object or collection (array) of option objects. If there are no matches to the parameters, the returned value is null.

Parameters

ID

The string that contains the same value as the desired element's id attribute.

remove( ) NN 6 IE 5 DOM 1
remove(positionIndex)
Deletes an option element from the current select element at the zero-based index position signified by the parameter value. In lieu of setting the select object's length property to zero, you can remove all existing options with a simple loop construction:
while (selectElemRef.length > 0) { selectElemRef.remove(0); }
At this point, you can populate the list with new options via the various approaches described in the add( ) method discussion and the options object discussion.

Returned Value

None.

Parameters

positionIndex

Zero-based integer signifying the item from the nested options collection to be deleted.

selection NN 6 IE 4(Win) DOM n/a

The selection object represents zero or more characters that have been explicitly selected in a document by the user or selected under script control. The objects are very different entities in the IE and Navigator browsers (observe compatibility ratings for properties and methods, below), and each has its own ways of providing script access to it.

In IE for Windows, you create a selection object via the document.selection property, which returns a selection object. To perform substantive actions on the content of the selection object, you then generate a TextRange object from the selection object (via the selection object's createRange( ) method). Use TextRange properties and methods to interact with the content. To convert a TextRange object to a visibly selected stretch of text on the page, use the TextRange object's select( ) method. This close linkage with the TextRange object means that the IE selection object is so far limited to Win32 versions. The IE selection object can include selected text inside an input (of type text) and textarea element.

In IE for the Macintosh, you don't have a selection object per se. Instead, it implements the Navigator 4 document.getSelection( ) method, which returns only the string contents of the selected text.

Navigator 4 offers script access to the text selected in a document through the use of the document.getSelection( ) method. This method is deprecated in Netscape 6, and even displays a warning (less harmful than an error) in the JavaScript Console if you use the method. In its place, Netscape 6 implements a robust selection object that offers a long list of properties and methods to interact with the object. Most of this functionality was made available starting with Netscape 6.2, including the way to create a selection object: the window.getSelection( ) method. Notice that many properties and methods of the Netscape 6 selection object have analogs with the Range object specification. In fact, it is through the Range object that scripts can highlight even discontiguous text spans on the page: create and size a Range object; then add that Range to the highlighted text via the selection object's addRange( ) method. Netscape 6 selections (as with the Range object) operate only on body content, and not on text inside editable text boxes.

Be aware that clicking on buttons in earlier browsers (including IE 5 for the Mac) deselects the current text selection. Therefore, all scripted action involving selections in these browsers must be triggered by onselect or onmouseup events, or functions invoked by a timer (see the window.setTimeout( ) method description in Chapter 12). More recent browsers maintain content selections while buttons are pressed.

Object Model Reference

IE (Win): document.selection
NN 6: window.getSelection( )

Object-Specific Properties

`anchorNode`	`anchorOffset`	`focusNode`	`focusOffset`
`isCollapsed`	`rangeCount`	`type`	`typeDetail`

Object-Specific Methods

`addRange( )`	`clear( )`	`collapse( )`
`collapseToEnd( )`	`collapseToStart( )`	`containsNode( )`
`createRange( )`	`createRangeCollection( )`	`deleteFromDocument( )`
`empty( )`	`extend( )`	`getRangeAt( )`
`removeAllRanges( )`	`removeRange( )`	`selectAllChildren( )`
`selectionLanguageChange( )`	`toString( )`

Object-Specific Event Handler Properties

None.

anchorNode, focusNode NN 6 IE n/a DOM n/a
Read-only
Return a reference to the node where the user started (anchor) and ended (focus) the selection. Most typically, these are text node types. If the selection is set or extended via the addRange( ) method, these properties point to the node boundaries of the most recently added range.

Example

var anchor = selectionRef.anchorNode; if (anchor.nodeType == 3 && anchor.parentNode.tagName == "td") { // process selection start inside a table cell }

Value

Reference to a document tree node, or null if no selection.

Default

null

anchorOffset, focusOffset NN 6 IE n/a DOM n/a
Read-only
Return an integer count of characters or nodes from the beginning of the anchor or focus nodes of the selection (see anchorNode and focusNode properties). If the node is a text node, the offset unit is the character; if the node is an element node, the offset unit is the node. This behavior is similar to the offset properties of a Range object. Most typically, these values count characters within text node types. If the selection is set or extended via the addRange( ) method, these properties point to the node boundary offsets of the most recently added range.

Example

var selStartOffset = selectionRef.anchorOffset;

Value

Integer.

Default

0

isCollapsed NN 6 IE n/a DOM n/a
Read-only
Returns Boolean true if the anchor and focus boundaries of a selection are identical.

Example

if (selectionRef.isCollapsed) { // selection is an insertion point }

Value

Boolean value: true | false.

Default

true

rangeCount NN 6 IE n/a DOM n/a
Read-only
Returns an integer count of Range objects (which may be discontiguous in Netscape 6) within the span of the selection. A manual selection by the user always contains one Range, but the addRange( ) method can tack on multiple, discontiguous ranges to the selection. To inspect each highlighted section's properties, use the getRangeAt( ) method.

Example

var howMany = selectionRef.rangeCount;

Value

Integer.

Default

0

type NN n/a IE 4(Win) DOM n/a
Read-only
Specifies whether the current selection object has one or more characters selected or is merely an insertion point.

Example

if (document.selection.type == "Text") { ... }

Value

One of three constant values (as a string): None | Text | Control. The last one is possible only when HTML editing is engaged and control selections are possible.

Default

None

typeDetail NN n/a IE 5.5(Win) DOM n/a
Read-only
This property is supplied as a placeholder for other applications that may use the IE browser component. Such an application can provide additional selection type information as needed.

addRange( ) NN 6 IE n/a DOM n/a
addRange(RangeReference)
Turns a Range into a highlighted selection on the page. You can add as many discontiguous ranges to the selection as your application requires. Each addition increments the selection object's rangeCount property. Ranges may also overlap in a selection.
var selRef = window.getSelection( ); var rng = document.createRange( ); rng.selectNodeContents(document.getElementById("myP")); selRef.addRange(rng);

Returned Value

None.

Parameters

RangeReference

Reference to a Range object with boundaries that have been established by Range object methods.

clear( ) NN n/a IE 4(Win) DOM n/a
Deletes the content of the current selection in a document. For example, the event handler in the following tag deletes any selected text of the p element two seconds after the user starts making the selection:


Returned Value

None.

Parameters

None.

collapse( ) NN 6 IE n/a DOM n/a
collapse(nodeReference, offset)
Collapses the current selection to a location specified by the two parameters. Any previously highlighted selection returns to normal display.

Returned Value

None.

Parameters

nodeReference

Reference to a text or element node in the document tree in which the collapsed selection should move.

offset

Integer count of characters or nodes within the nodeReference node where the collapsed selection should move. The count is relative to the start of the node. Units are character for text nodes, nodes for elements.

collapseToEnd( ), collapseToStart( ) NN 6 IE n/a DOM n/a
Collapses the current selection to a location at the start (collapseToStart( )) or end (collapseToEnd( )) of the selection object. Any previously highlighted selection returns to normal display. If the selection consists of multiple ranges, the start or end boundary used for these collapse methods are at the outermost edges of the combined selection. After the collapse, the selection contains only one range.

Returned Value

None.

Parameters

None.

containsNode( ) NN 6 IE n/a DOM n/a
containsNode(nodeReference, entirelyFlag)
Returns Boolean true if the current selection object contains a node passed as a parameter. The second parameter is supposed to let you loosen or tighten the definition of contains, but the behavior of the method seems backward to the intended purpose of the flag. You can assure accuracy if you pass null as the second parameter, which forces the method to define containment as containing the node in its entirety.

Returned Value

Boolean value: true | false.

Parameters

nodeReference

Reference to any addressable text or element node in the document tree.

entirelyFlag

Boolean value or null. Observed behavior is that a value of true means the selection can contain only a part of the node for the method to return true.

createRange( ) NN n/a IE 4(Win) DOM n/a
Creates a TextRange object from the current selection object. After a statement like the following:
var myRange = document.selection.createRange( );
scripts can act on the content of the selected text.

Returned Value

TextRange object.

Parameters

None.

createRangeCollection( ) NN n/a IE 5.5(Win) DOM n/a
Creates a TextRange collection object. This must be in anticipation of IE supporting multiple, discontiguous selections in the future.

Returned Value

TextRange collection object.

Parameters

None.

deleteFromDocument( ) NN 6 IE n/a DOM n/a
Removes the current selection from the document tree. The node hierarchy adjusts itself by obeying the same rules as Range.deleteContents( ).

Returned Value

None.

Parameters

None.

empty( ) NN n/a IE 4(Win) DOM n/a
Deselects the current selection and sets the selection object's type property to None. There is no change to the content that had been selected.

Returned Value

None.

Parameters

None.

extend( ) NN 6 IE n/a DOM n/a
extend(nodeReference, offset)
Moves the end (focus) boundary of the selection to the designated document tree node and offset within that node. The start (anchor) point does not move with this method.

Returned Value

None.

Parameters

nodeReference

Reference to a text or element node in the document tree in which the selection's focus (end point) should move.

offset

Integer count of characters or nodes within the nodeReference node where the collapsed selection should move. The count is relative to the start of the node. Units are character for text nodes, nodes for elements.

getRangeAt( ) NN 6 IE n/a DOM n/a
getRangeAt(rangeIndex)
Returns a reference to the range within a selection object whose zero-based numeric index matches the passed parameter. For contiguous selections, the parameter should be zero. But for discontiguous selections, the getRangeAt( ) method lets you retrieve each range that had been added to the selection for individual manipulation as a Range object. Use the selection.rangeCount property to derive the number of Range objects contained by the selection object. Invoking the method does not disturb the sequence of ranges within the selection.

Returned Value

Range object reference.

Parameters

rangeIndex

Zero-based integer index value.

removeAllRanges( ) NN 6 IE n/a DOM n/a
Removes all Range objects from the current selection (not from the document tree). The selection collapses, and the rangeCount property value changes to zero.

Returned Value

None.

Parameters

None.

removeRange( ) NN 6 IE n/a DOM n/a
removeRange(rangeReference)
Removes a single Range object from the current selection (not from the document tree). If you have a multiple-range selection, you can iterate through all Range objects, inspect each for some criterion, and delete the one(s) you want with the following sequence:
var oneRange; var sel = window.getSelection( ); for (var i = 0; i < sel.rangeCount; i++) { oneRange = sel.getRangeAt(i); if (oneRange.someProperty == someDiscerningValue) { sel.removeRange(oneRange); } }

Returned Value

None.

Parameters

rangeReference

Reference to one of the Range objects previously added to the current selection.

selectAllChildren( ) NN 6 IE n/a DOM n/a
selectAllChildren(elementNodeReference)
Forces the selection object to encompass the element node passed as a parameter and all of its child nodes. This method is also a shortcut to using a script to select an element node. Using this method on an element node causes the anchor and focus nodes to be that element node. Should you pass a reference to a text node, the resulting selection is collapsed in front of the first character of the text node. Invoking this method on an existing selection replaces all ranges with the new range encompassing the element.

Returned Value

None.

Parameters

elementNodeReference

Reference to an element node in the document tree that becomes the selection.

selectionLanguageChange( ) NN 6 IE n/a DOM n/a
selectionLanguageChange(RTLFlag)
Controls the cursor Bidi (bi-directional) level.

Returned Value

None.

Parameters

RTLFlag

Boolean value: true for right-to-left; false for left-to-right.

toString( ) NN 6 IE n/a DOM n/a
Returns a string containing only body content from the selection. Tags and attributes are ignored.

Returned Value

String value.

Parameters

None.

style (element) NN 6 IE 4 DOM 1

The style element object reflects the style HTML element. This object is separate from the style object that is accessed as a property of virtually every element in a document. The style element object is generated in a document via the <style> tag, which can have a unique ID value assigned to it; the style (property) object contains all the style properties and their current values as set for a particular element.

HTML Equivalent

<style>

Object Model Reference

[window.]document.getElementById("elementID")

Object-Specific Properties

disabled

media

sheet

styleSheet

type

Object-Specific Methods

None.

Object-Specific Event Handler Properties

Handler	NN	IE	DOM
`onerror`	n/a	4	n/a
`onload`	n/a	4	n/a

disabled NN 6 IE 4 DOM 1
Read/Write
Specifies whether rules in the style sheet should be applied to their selected elements. Although the corresponding disabled attribute does not work in Internet Explorer 4, setting the disabled property to true does, in fact, turn off the entire style sheet. During page authoring, you can create a button that toggles style sheets on and off to see how the page looks in all types of browsers.

Example

document.getElementById("mainStyle").disabled = true;

Value

Boolean value: true | false.

Default

false

media NN 6 IE 4 DOM 1
Read/Write
Indicates the intended output device for the rules of the style element. The media property looks forward to the day when browsers are able to tailor content to specific kinds of devices such as pocket computers, text-to-speech digitizers, or fuzzy television sets.

Example

document.getElementById("myStyle").media = "print";

Value

Any one of the following constant values as a string: all | print | screen.

Default

all

sheet NN 6 IE n/a DOM n/a
Read-only
Returns a styleSheet object (W3C DOM type CSSStyleSheet) representing the style sheet defined by the style element. This is an alternate (and nonstandard) way to reference a styleSheet object. The document.styleSheets collection is a better approach.

Example

var oneSheet = document.getElementById("myStyle").sheet;

Value

Reference to a styleSheet object (W3C DOM type CSSStyleSheet).

Default

None.

styleSheet NN n/a IE 6(Win) DOM n/a
Read-only
Returns a styleSheet object representing the style sheet defined by the style element. This is property is present, but doesn't seem to be officially supported. The document.styleSheets collection is a better approach.

Example

var oneSheet = document.getElementById("myStyle").styleSheet;

Value

Reference to a styleSheet object.

Default

None.

type NN 6 IE 4 DOM 1
Read/Write
This is the style sheet MIME type specified by the type attribute of the style element.

Example

if (document.getElementById("myStyle").type == "text/css") { // unlikely to be anything else }

Value

MIME type string.

Default

text/css

style, CSSStyleDeclaration NN 6 IE 4 DOM 2

In its most generic sense, a style object is the access point for scripts to read and write individual style attributes for a given element. This style object exposes (or has the potential to expose) every style sheet attribute supported by the browser (the kinds of CSS attributes described in Chapter 11).

In practice, however, a style object that you access through an HTML element object's style property (one of the shared properties described early in this chapter) is limited in scope: It reflects only the CSS settings explicitly defined in the element's tag via the style attribute or settings assigned to the element's style property via script. But other style sheets associated with the browser (internal style sheets) and the document (explicit style sheet rules defined in the <style> element and rules imported through either a link element or an @import rule) also affect the rendered characteristics of the element. A union of all style sheet attributes affecting an element—the effective style definition—may be read, but through browser-dependent syntax. IE uses the currentStyle property of an element, whereas Netscape 6 uses the W3C DOM window.getComputedStyle( ) method. Both syntaxes return an object that lets scripts inspect the value of each effective style attribute value.

While the three IE style-related objects (style, currentStyle, and runtimeStyle) return a style object with properties that expose CSS style attributes, the situation is a little more complex on the Netscape 6 side. On the one hand, Netscape 6 implements a version of the W3C DOM CSSStyleDeclaration object that exposes all the CSS attributes as properties. This is the version accessed through an element object's style property (just like IE, thus making an element object's style property work cross-browser). But when you read the effective style sheet (via window.getComputedStyle( )), the object that comes back does not expose the CSS attributes directly as properties. Instead, you must use the CSSStyleDeclaration methods (listed below) to inspect a specific attribute value by name. It's a longer way to reach a particular effective style attribute value, but very much in keeping with other attribute-reading syntax deployed throughout the W3C DOM. The only time this cross-browser disconnect affects you is when you need to view the effective style attribute for an unmodified style. Once you set an attribute value via the element object's style property, you can read it from the style property cross-browser.

This section lists the available style object properties plus the Netscape 6 (W3C DOM) formal methods for accessing those attributes. The W3C DOM lists a large percentage of the style object properties under an object umbrella called CSS2Properties. The specification offers the CSS2Properties object as an optional convenience for browsers. Fortunately for cross-browser scripters, Netscape 6 implements CSS2Properties at least for the element object style property.

The properties of the style object listed below correspond to the CSS attributes. For more information on a particular property, see the corresponding listing in Chapter 11.

Object Model Reference

All: [window.]document.getElementById("elementID").style
IE: [window.]document.styleSheets[i].rules[j].style
NN: [window.]document.styleSheets[i].cssRules[j].style

Object-Specific Properties

`accelerator`	`azimuth`	`background`
`backgroundAttachment`	`backgroundColor`	`backgroundImage`
`backgroundPosition`	`backgroundPositionX`	`backgroundPositionY`
`backgroundRepeat`	`behavior`	`blockDirection`
`border`	`borderBottom`	`borderBottomColor`
`borderBottomStyle`	`borderBottomWidth`	`borderCollapse`
`borderColor`	`borderLeft`	`borderLeftColor`
`borderLeftStyle`	`borderLeftWidth`	`borderRight`
`borderRightColor`	`borderRightStyle`	`borderRightWidth`
`borderSpacing`	`borderStyle`	`borderTop`
`borderTopColor`	`borderTopStyle`	`borderTopWidth`
`borderWidth`	`bottom`	`captionSide`
`clear`	`clip`	`clipBottom`
`clipLeft`	`clipRight`	`clipTop`
`color`	`content`	`counterIncrement`
`counterReset`	`cssFloat`	`cssText`
`cue`	`cueAfter`	`cueBefore`
`cursor`	`direction`	`display`
`elevation`	`emptyCells`	`filter`
`font`	`fontFamily`	`fontSize`
`fontSizeAdjust`	`fontStretch`	`fontStyle`
`fontVariant`	`fontWeight`	`height`
`imeMode`	`layoutFlow`	`layoutGrid`
`layoutGridChar`	`layoutGridLine`	`layoutGridMode`
`layoutGridType`	`left`	`letterSpacing`
`lineBreak`	`lineHeight`	`listStyle`
`listStyleImage`	`listStylePosition`	`listStyleType`
`margin`	`marginBottom`	`marginLeft`
`marginRight`	`marginTop`	`markerOffset`
`marks`	`maxHeight`	`maxWidth`
`minHeight`	`minWidth`	`MozBinding`
`MozOpacity`	`orphans`	`outline`
`outlineColor`	`outlineStyle`	`outlineWidth`
`overflow`	`overflowX`	`overflowY`
`padding`	`paddingBottom`	`paddingLeft`
`paddingRight`	`paddingTop`	`page`
`pageBreakAfter`	`pageBreakBefore`	`pageBreakInside`
`pause`	`pauseAfter`	`pauseBefore`
`pitch`	`pitchRange`	`pixelBottom`
`pixelHeight`	`pixelLeft`	`pixelRight`
`pixelTop`	`pixelWidth`	`playDuring`
`posBottom`	`posHeight`	`posLeft`
`posRight`	`posTop`	`posWidth`
`position`	`quotes`	`richness`
`right`	`rubyAlign`	`rubyOverhang`
`rubyPosition`	`scrollbar3dLightColor`	`scrollbarArrowColor`
`scrollbarBaseColor`	`scrollbarDarkShadowColor`	`scrollbarFaceColor`
`scrollbarHighlightColor`	`scrollbarShadowColor`	`scrollbarTrackColor`
`size`	`speak`	`speakHeader`
`speakNumeral`	`speakPunctuation`	`speechRate`
`stress`	`styleFloat`	`tableLayout`
`textAlign`	`textAlignLast`	`textAutospace`
`textDecoration`	`textDecorationBlink`	`textDecorationLineThrough`
`textDecorationNone`	`textDecorationOverline`	`textDecorationUnderline`
`textIndent`	`textJustify`	`textKashidaSpace`
`textOverflow`	`textShadow`	`textTransform`
`textUnderlinePosition`	`top`	`unicodeBidi`
`verticalAlign`	`visibility`	`voiceFamily`
`volume`	`whiteSpace`	`widows`
`width`	`wordBreak`	`wordSpacing`
`wordWrap`	`writingMode`	`zIndex`
`zoom`

Object-Specific Methods

`getPropertyCSSValue( )`	`getPropertyPriority( )`	`getPropertyValue( )`
`item( )`	`removeProperty( )`	`setProperty( )`

Object-Specific Event Handler Properties

None.

accelerator NN n/a IE 5(Win) DOM n/a
See text
For IE 5 and later running under Windows 2000 or newer version of Windows, users can set a preference to highlight an accelerator key for commands (or web page accessKey letters) when the user presses the Alt key. The accelerator key property controls whether the element is treated as a highlightable accelerator key string. Available as a property of the IE currentStyle (read-only) and runtimeStyle (read/write) objects only.

Example

document.getElementById("controlH").style.accelerator = true;

Value

Boolean value: true | false.

Default

false

azimuth, cue, cueAfter, cueBefore, elevation, pause, pauseAfter, pauseBefore, pitch, pitchRange, playDuring, richness, speak, speakHeader, speakNumeral, speakPunctuation, speechRate, stress, voiceFamily, volume NN 6 IE n/a DOM 2
Read/Write
This large group of properties comes from CSS attributes intended for browsers that use speech synthesis techniques to vocalize document content. You don't have to be vision-impaired to benefit from this possibility, but Netscape 6 does not include this feature by default. Conceivably, other specialty browser makers will build a speech synthesized browser from the Mozilla engine. They'll have the hooks ready in the Mozilla DOM to permit scripting of these style properties. In the meantime, they're simply placeholders within Netscape 6. You can read about these CSS attributes in Chapter 11.

Value

All values for these properties are strings.

Default

None.

background NN 6 IE 4 DOM 2
Read/Write
Provides the element's style sheet background attribute. This is a shorthand attribute, so the scripted property consists of a string of space-delimited values for the backgroundAttachment, backgroundColor, backgroundImage, backgroundPosition, and backgroundRepeat property values. One or more values may be in the background value, and the individual values may be in any order. Available in IE as a property of the style and runtimeStyle objects only.

Example

document.getElementById("myDiv").style.background = "url(logo.gif) repeat-y";

Value

String of space-delimited values corresponding to one or more individual background style properties.

Default

None.

backgroundAttachment NN 6 IE 4 DOM 2
Read/Write
Sets how the image is "attached" to the element. The image can either remain fixed within the viewable area of the element (the viewport) or it may scroll with the element as the document is scrolled. During scrolling, the fixed attachment looks like a stationary backdrop to rolling credits of a movie.

Example

document.getElementById("myDiv").style.backgroundAttachment = "fixed";

Value

String of either allowable value: fixed | scroll.

Default

scroll

backgroundColor NN 6 IE 4 DOM 2
Read/Write
Provides the background color of the element. If you also set a backgroundImage, the image overlays the color. Transparent pixels of the image allow the color to show through.

Example

document.getElementById("highlighted").style.backgroundColor = "yellow";

Value

Any valid color specification (see description at beginning of the chapter) or transparent.

Default

transparent

backgroundImage NN 6 IE 4 DOM 2
Read/Write
URL of the background image of the element. If you also set a backgroundColor, the image overlays the color. Transparent pixels of the image allow the color to show through.

Example

document.getElementById("navbar").style.backgroundImage = "url(images/navVisited.jpg)";

Value

Any complete or relative URL to an image file in CSS URL format: url(filePath).

Default

None.

backgroundPosition NN 6 IE 4 DOM 2
Read/Write
Indicates the top and left location of a background image relative to the element's content region (plus padding). Positions may be specified as length values (with numbers and units or percentages) or according to a combination of constants top, right, bottom, left, and center. The property has no effect on a background images set to repeat along both axes. Some value types don't work (or work correctly) in IE 4. Available as a property of the IE style and runtimeStyle objects only.

Example

document.getElementById("div3").style.backgroundPosition = "20% 50%";

Value

A string containing one value (to be applied to both horizontal and vertical axes) or a space-delimited pair of values. Values may be explicit length values (with units, as in 30px 5px), percentages (e.g., 50% 50%) or position constants that have explicit meanings for their combinations.

Constant value pair

Percentage equivalents

Constant value pair

Percentage equivalents

top left 0% 0% center center 50% 50%

left top 0% 0% right 100% 50%

top 50% 0% right center 100% 50%

top center 50% 0% center right 100% 50%

center top 50% 0% bottom left 0% 100%

right top 100% 0% left bottom 0% 100%

top right 100% 0% bottom 50% 100%

left 0% 50% bottom center 50% 100%

left center 0% 50% center bottom 50% 100%

center left 0% 50% bottom right 100% 100%

center 50% 50% right bottom 100% 100%

Percentage values are interpolated logically. For example, a value of 0% means that the image abuts the left or top edge of the element block; a value of 50% centers the image vertically or horizontally; a value of 100% places the image flush right or bottom..

Default

0% 0%

backgroundPositionX, backgroundPositionY NN n/a IE 4 DOM n/a
Read/Write
Indicate the top and left locations of the background image relative to the element's content region (plus padding). Useful if you wish to adjust the background image along only one axis while not disturbing the other. The same IE 4 cautions for backgroundPosition apply to these two properties.

Example

document.getElementById("div3").style.backgroundPositionX = "20px"; document.getElementById("table2").style.backgroundPositionY = "10px;"

Value

You should be able to specify percentage values, which are the percentage of the block-level element's box width and height (respectively) at which point the image (or repeated images) begins. Setting percentage values, however, does not always work in IE 4 for Windows (and it doesn't work at all on the Mac), even though they are returned as the default value units. You are safest with pixel values. None of the allowed constants except top and left are recognized.

Default

0

backgroundRepeat NN 6 IE 4 DOM 2
Read/Write
Specifies whether a background image (specified with the backgroundImage property) should repeat and, if so, along which axes. You can use repeating background images to create horizontal and vertical bands with some settings.

Example

document.getElementById("div3").style.backgroundRepeat = "repeat-y";

Value

With a string setting of no-repeat, one instance of the image appears in the location within the element established by the backgroundPosition property (default is top-left corner). Normal repeats are performed along both axes, but you can have the image repeat down a single column (repeat-y) or across a single row (repeat-x). To reestablish the default, assign the value repeat.

Default

repeat

behavior NN n/a IE 5(Win) DOM n/a
Read/Write
Controls whether an IE Windows external behavior is assigned to the element.

Example

document.getElementById("div3").style.behavior = "url(#default#userData)";

Value

CSS-formatted URL value, with the actual URL pointing to an external .htc file, ID of an object element that loads a behavior ActiveX control into the page, or one of the built-in default behaviors (in the format url(#default#behaviorName)).

Default

None.

blockDirection NN n/a IE 5(Win) DOM n/a
Read-only
Returns the writing script direction of the current element. Available as a property of the IE currentStyle object only.

Example

if (document.getElementById("myDIV").style.blockDirection = "rtl") { // process right-to-left text }

Value

String constant values: ltr | rtl.

Default

ltr

border NN 6 IE 4 DOM 2
Read/Write
Provides a shorthand property for getting or setting the borderColor, borderStyle, and/or borderWidth properties of all four borders around an element in one statement. You must specify a border style (see borderStyle) for changes of this property to affect the display of the element's border (a missing style is interpreted as no style, ergo no border). Numerous other properties allow you to set the width, style, and color of individual edges or groups of edges if you don't want all four edges to be the same. Only those component settings explicitly made in the element's tag attributes are reflected in the property, but you may assign components not part of the original tag. Available in IE as a property of the style and runtimeStyle objects only.

Example

document.getElementById("announce").style.border = "inset red 4px";

Value

Space-delimited string. For the borderStyle and borderWidth component values, see the respective properties in this chapter. For details on the borderColor value, see the section about CSS colors at the beginning of Chapter 11.

Default

None.

borderBottom, borderLeft, borderRight, borderTop NN 6 IE 4 DOM 2
Read/Write
These are shorthand properties for getting or setting the borderColor, borderStyle, and/or borderWidth properties for a single edge of an element in one statement. You must specify a border style (see borderStyle) for changes of these properties to affect the display of the element's border (a missing style is interpreted as no style, ergo no border along the specified edge). If you want all four edges to be the same, see the border attribute. Only those component settings explicitly made in the element's tag attributes are reflected in the property, but you may assign components not part of the original tag. Available in IE as properties of the style and runtimeStyle objects only.

Example

document.getElementById("announce").style.borderBottom = "inset red 4px"; document.getElementById("announce").style.borderLeft = "solid #20ff00 2px"; document.getElementById("announce").style.borderRight = "double 3px"; document.getElementById("announce").style.borderTop = "outset red 8px";

Value

Space-delimited string. For the borderSideStyle and borderSideWidth component values, see the respective properties in this chapter. For details on the borderSideColor value formats, see the section about colors at the beginning of Chapter 11.

Default

None.

borderBottomColor, borderLeftColor, borderRightColor, borderTopColor NN 6 IE 4 DOM 2
Read/Write
Provide the color of a single border edge of an element. It is easy to abuse these properties by mixing colors that don't belong together. See also the borderColor attribute for setting the color for groups of edges in one statement.

Example

document.getElementById("announce").style.borderBottomColor = "red"; document.getElementById("announce").style.borderLeftColor = "#20ff00"; document.getElementById("announce").style.borderRightColor = "rgb(100, 75, 0)"; document.getElementById("announce").style.borderTopColor = "rgb(90%, 0%, 25%)";

Value

For details on CSS color values, see the section about colors at the beginning of Chapter 11.

Default

None.

borderBottomStyle, borderLeftStyle, borderRightStyle, borderTopStyle NN 6 IE 4 DOM 2
Read/Write
Provide the line style of a single border edge of an element. The edge-specific attributes let you override a style that has been applied to all four edges with the border or borderStyle properties. See also the borderStyle property for setting the style for groups of edges in one statement.

Example

document.getElementById("announce").style.borderBottomStyle = "groove"; document.getElementById("announce").style.borderLeftStyle = "double"; document.getElementById("announce").style.borderRightStyle = "solid"; document.getElementById("announce").style.borderTopStyle = "inset";

Value

Style values are case-insensitive constants that are associated with specific ways of rendering border lines. The CSS style constants are: dashed, dotted, double, groove, hidden, inset, none, outset, ridge, and solid. Not all browsers recognize all the values in the CSS recommendation. See the border-style attribute listing in Chapter 11 for complete details on the available border styles.

Default

None.

borderBottomWidth, borderLeftWidth, borderRightWidth, borderTopWidth NN 6 IE 4 DOM 2
Read/Write
Provide the width of a single border edge of an element. See also the borderWidth property for setting the width for groups of edges in one statement.

Example

document.getElementById("announce").style.borderBottomWidth= "thin"; document.getElementById("announce").style.borderLeftWidth = "thick"; document.getElementById("announce").style.borderRightWidth = "2px"; document.getElementById("announce").style.borderTopWidth = "0.5em";

Value

Three case-insensitive constants—thin | medium | thick—allow the browser to define how many pixels are used to show the border. For more precision, you can also assign a length value (see the discussion of CSS length values at the beginning of Chapter 11).

Default

medium

borderCollapse NN 6 IE 5 DOM 2
Read/Write
Controls which table border model the table element should observe.

Example

document.getElementById("myTable").style.borderCollapse = "separate";

Value

Two case-insensitive string constants: collapse | separate. IE 5 for Macintosh and Netscape 6 do not respond to changes to this property.

Default

separate

borderColor NN 6 IE 4 DOM 2
Read/Write
A shortcut attribute that lets you set multiple border edges to the same or different colors. You may supply one to four space-delimited color values. The number of values determines which sides receive the assigned colors.

Example

document.getElementById("announce").style.borderColor = "red"; document.getElementById("announce").style.borderColor = "red green"; document.getElementById("announce").style.borderColor = "black rgb(100, 75, 0) #c0c0c0"; document.getElementById("announce").style.borderColor = "yellow green blue red";

Value

This property accepts one, two, three, or four color values as a string (including transparent as a color), depending on how many and which borders you want to set with specific colors. See the border-color attribute listing in Chapter 11 for complete details on how the number of values affects this property.

Default

The object's color property (if it is set).

borderSpacing NN 6 IE 5 DOM 2
Read/Write
Controls the spacing between table cells when the table is in (the default) separate borders mode, similar to a table object's cellSpacing property. IE 5 for the Macintosh doesn't respond to changes of this property's value. Available in IE as a property of the style object only.

Example

document.getElementById("myTable").style.borderSpacing= "12px";

Value

CSS length value as a string (see the discussion of CSS length values at the beginning of Chapter 11).

Default

None.

borderStyle NN 6 IE 4 DOM 2
Read/Write
This is a shortcut property that lets you set multiple border edges to the same or different style. You may supply one to four space-delimited style values. The number of values determines which sides receive the assigned colors.

Example

document.getElementById("announce").style.borderStyle = "solid"; document.getElementById("announce").style.borderStyle = "solid double"; document.getElementById("announce").style.borderStyle = "double groove groove double";

Value

Style values are case-insensitive constants that are associated with specific ways of rendering border lines. The CSS style constants are: dashed, dotted, double, groove, hidden, inset, none, outset, ridge, and solid. Not all browsers recognize all the values in the CSS recommendation. See the border-style attribute listing in Chapter 11 for complete details on the available border styles.

This property accepts one, two, three, or four style values as a string, depending on how many and which borders you want to set with specific styles. See the border-style attribute listing in Chapter 11 for complete details on how the number of values affects this property.

Default

none

borderWidth NN 6 IE 4 DOM 2
Read/Write
This is a shortcut property that lets you set multiple border edges to the same or different width. You may supply one to four space-delimited width length values. The number of values determines which sides receive the assigned widths.

Example

document.getElementById("founderQuote").style.borderWidth = "3px 5px";

Value

Three case-insensitive constants—thin | medium | thick—allow the browser to define exactly how many pixels are used to show the border. For more precision, you can also assign a length value (see the discussion of length values at the beginning of Chapter 11).

This property accepts one, two, three, or four values, depending on how many and which borders you want to set with specific widths. See the border-width attribute listing in Chapter 11 for complete details on how the number of values affects this property.

Default

medium

bottom NN 6 IE 5 DOM 2
Read/Write
For an absolute-positioned element, defines the position of the bottom edge of an element's box (content plus bottom padding, border, and/or margin) relative to the bottom edge of the next outermost block content container. IE for Windows and Netscape 6 do something unexpected when the positioned element uses the root positioning context. Instead of using the bottom of the document as the comparative edge, these browsers use the bottom of the browser window space (the viewport in CSS terminology). This means that the precise bottom position of the element varies with the user's browser window size. IE 5 for the Macintosh uses the document's bottom as the comparative edge. This discrepancy makes it more practical to use the bottom property for a positioned element nested inside another positioned element. When the element is relative-positioned, the offset is based on the bottom edge of the inline location where the element would normally appear in the content.
For numeric calculations on this value in IE, retrieve the pixelBottom or posBottom style properties, which return genuine numeric values.

Example

document.getElementById("blockD2").style.bottom = "35px";

Value

String consisting of a numeric value and length unit measure, a percentage, or auto.

Default

auto

captionSide NN 6 IE 5(Mac) DOM 2
Read/Write
Controls the location of a caption element (nested inside a table element) relative to the table's box.

Example

document.getElementById("myTable").style.captionSide = "bottom";

Value

Case-insensitive string of any of the following constants: bottom | left | right | top. Some browsers may be limited to only the bottom and top values.

Default

top

clear NN 6 IE 4 DOM 2
Read/Write
Defines whether the element allows itself to be displayed in the same horizontal band as a floating element. Typically, another element in the vicinity has its float style attribute set to left or right. To prevent the current element from being in the same band as the floating block, set the clear property to the same side (left or right). If you aren't sure where the potential overlap might occur, set the clear property to both. An element that has its clear property set to a value other than none is rendered at the beginning of the next available line below the floating element.

Example

document.getElementById("myDiv").style.clear = "both";

Value

Case-insensitive string of any of the following constants: both | left | none | right.

Default

none

clip NN 6 IE 4 DOM 2
Read/Write
Defines a clipping region of a positionable element. The clipping region is the area of the element layer in which content is visible. Clipping may not work properly in Internet Explorer 4 for the Macintosh. Available in IE as a property of the style and runtimeStyle objects only.

Example

document.getElementById("art2").style.clip = "rect(5px 100px 40px 0)";

Value

Case-insensitive string of either the auto constant or the CSS clip attribute setting that specifies the shape (rect only for now) and the position of the four clip edges relative to the original element's top-left corner. When specifying lengths for each side of the clipping rectangle, observe the clockwise order of values: top, right, bottom, left. See the discussion about CSS length values at the beginning of Chapter 11. A value of auto sets the clipping region to the block that contains the content. In Internet Explorer, the width may extend to the width of the next outermost container (such as the body element).

Default

None.

clipBottom, clipLeft, clipRight, clipTop NN n/a IE 5(Win) DOM n/a
Read-only
Return a clipping edge of a positionable element. Available in IE as a property of the currentStyle object only.

Example

var cl = document.getElementById("art2").style.clipLeft;

Value

Case-insensitive length string or auto constant. See the discussion about CSS length values at the beginning of Chapter 11.

Default

None.

color NN 6 IE 4 DOM 2
Read/Write
Sets the foreground (text) color style sheet attribute of the element. For some graphically oriented elements, such as form controls, the color attribute may also be applied to element edges or other features. Such extracurricular behavior is browser specific and may not be the same across browsers.

Example

document.getElementById("specialDiv").style.color = "green";

Value

Case-insensitive CSS color specification (see the discussion at beginning of Chapter 11).

Default

black

content NN 6 IE 5(Mac) DOM 2
Read/Write
Defines extra content that is to be displayed before or after and element (in concert with the :before and :after pseudo-classes. Although the property is available for IE 5 Macintosh and Netscape 6, the values are empty strings and the rendered content (which appears in Netscape 6 only) does not change if you assign it a new value.

Value

See the discussion of the content CSS attribute in Chapter 11.

Default

None.

counterIncrement, counterReset NN 6 IE 5(Mac) DOM 2
Read/Write
These properties are placeholders for future implementations of automatic counter mechanisms specified in the CSS specification. They are not yet functional in the browsers shown above.

Value

See the discussion of the counterIncrement and counterReset CSS attributes in Chapter 11.

Default

None.

cssFloat NN 6 IE 5(Mac) DOM 2
Read/Write
Controls the CSS float attribute for an element, allowing adjacent text content to wrap around block elements, such as images. Changing the value in IE 5 for Macintosh has no effect. The "css" prefix for this property name deflects potential conflicts with the float reserved JavaScript keyword.

Example

document.getElementById("myDiv").style.cssFloat = "right";

Value

String of an allowable constant value: left | right | none.

Default

none

cssText NN 6 IE 4 DOM 2
Read-only
Returns a string of the entire CSS style sheet rule applied to the element. If the rule included shorthand style attribute settings (such as border), browsers return modified versions according to their ideas of what the value means. If you set the style attribute of an element to style="border: groove red 3px", IE for Windows reports the cssText property for that element as:
BORDER-RIGHT: red 3px groove; BORDER-TOP: red 3px groove; BORDER-LEFT: red 3px groove; BORDER-BOTTOM: red 3px groove
IE for Macintosh reports:
{BORDER-TOP: 3px groove red; BORDER-RIGHT: 3px groove red; BORDER-BOTTOM: 3px groove red; BORDER-LEFT: 3px groove red}
And Netscape 6 reports:
border: 3px groove red;
Note how each browser manipulates the sequence of individual values. Even so, you can assign a shorthand value to the property and in any order you like. Available in IE as a property of the style and runtimeStyle objects only.

Example

document.getElementById("block3").style.cssText = "margin: 2px; font-size: 14pt";

Value

String value of semicolon-delimited style attributes.

Default

None.

cue, cueAfter, cueBefore
See azimuth.

cursor NN 6 IE 4 DOM 2
Read/Write
Specifies the shape of the cursor when the screen pointer is atop the element. The precise look of cursors depends on the operating system. Before deploying a modified cursor, be sure you understand the standard ways that the various types of cursors are used within the browser and operating system. Users expect a cursor design to mean the same thing across all applications. Figure 11-3 in Chapter 11 offers a gallery of Windows and Macintosh cursors for each of the cursor constant settings provided by Internet Explorer and the Netscape 6 group.
Setting this property affects the cursor only when it is atop the current element and does not set the cursor immediately on a global basis.

Example
document.getElementById("hotStuff").style.cursor = "pointer";
Value

Any one cursor constant as a string, as supported by various browsers and versions.

Cursor name

IE/Windows

IE/Mac

NN

alias

n/a

n/a

6

all-scroll

6

n/a

n/a

auto

4

4

6

cell

n/a

n/a

6

col-resize

6

n/a

n/a

context-menu

n/a

n/a

6

copy

n/a

n/a

6

count-down

n/a

n/a

6

count-up

n/a

n/a

6

count-up-down

n/a

n/a

6

crosshair

4

4

6

default

4

4

6

e-resize

4

4

6

grab

n/a

n/a

6

grabbing

n/a

n/a

6

hand

4

4

n/a

help

4

4

6

move

4

4

6

n-resize

4

4

6

ne-resize

4

4

6

no-drop

6

n/a

n/a

not-allowed

6

n/a

n/a

nw-resize

4

4

6

pointer

4

4

6

progress

6

n/a

n/a

row-resize

6

n/a

n/a

s-resize

4

4

6

se-resize

4

4

6

spinning

n/a

n/a

6

sw-resize

4

4

6

text

4

4

6

url(uri)

6

n/a

n/a

vertical-text

6

n/a

n/a

w-resize

4

4

6

wait

4

4

6

The IE 6 setting of an external URL requires an address of a cursor file of extension .cur or .ani.

Default

auto

direction NN 6 IE 5 DOM 2
Read/Write
Returns the writing script direction of the current element. Intended primarily for elements inside documents with mixed writing script directions (e.g., French text intermingled among Arabic).

Example

document.getElementById("term3").style.direction = "ltr";

Value

String constant values: ltr | rtl.

Default

ltr

display NN 6 IE 4 DOM 2
Read/Write
Controls the CSS box type used to render the element. The most common settings for body content dictate whether an element is rendered as a block or inline element. When set to none, the element is hidden, and surrounding content cinches up to fill the space. Some box types are specific to tables and lists.

Example

document.getElementById("instructionDiv").style.display = "none";

Value

Any one display type constant as a string, as supported by various browsers and versions.

Display type

IE/Windows

IE/Mac

NN

block

5

4

6

inline

5

4

6

inline-block

5.5

n/a

n/a

none

4

4

6

run-in

n/a

5

6

table-footer-group

5.5

5

6

table-header-group

5

5

6

Default

Element-dependent.

elevation
See azimuth.

emptyCells NN 6 IE 5(Mac) DOM 2
Read/Write
When a table is set to render the separate cell box format (the default), and a border is established for td elements in that table, the emptyCells style property controls whether the table renders borders around cells that have no content.

Example

document.getElementById("myTable").style.emptyCells = "hide";

Value

String of allowable constant values: hide | show.

Default

show

filter NN n/a IE 4(Win) DOM n/a
Read/Write
Sets the visual, reveal, or blend filter used to display or change content of an element. A visual filter can be applied to an element to produce effects such as content flipping, glow, drop shadow, and many others. A reveal filter is applied to an element when its visibility changes. The value of the reveal filter determines what visual effect is to be applied to the transition from hidden to shown (or vice versa). This includes effects such as wipes, blinds, and barn doors. A blend filter sets the speed at which a transition between states occurs. Although the filter property is present in Internet Explorer for Macintosh, it does not operate there.

Example

document.getElementById("fancy").style.filter= "dropshadow( )";

Value

Each filter property may have more than one space-delimited filter type associated with it. Each filter type is followed by a pair of parentheses, which may convey parameters about the behavior of the filter for the current element. A parameter generally consists of a name/value pair, with assignment performed by the equals symbol. Note that Microsoft instituted an entirely new filter syntax starting with IE 5.5 for Windows. The new syntax runs in parallel with the old (for now). See the filter style sheet attribute listing in Chapter 11 for details on filter settings and parameters.

Default

None.

font NN 6 IE 4 DOM 2
Read/Write
This is a shorthand property that lets you set one or more font-related properties—fontFamily, fontSize, lineHeight (which must be preceded by a / symbol in this property), fontStyle, fontVariant, and fontWeight—with one assignment statement. A space-delimited list of values (in any sequence) is applied to the specific font properties for which the value is a valid type. Or, you can short-circuit these individual settings by choosing one of the default (operating-system-dependent) system fonts: caption | icon | menu | message-box | small-caption | status-bar.

Example

document.getElementById("subhead").style.font = "bolder small-caps 16pt";

Value

For syntax and examples of value types for font-related properties, see the respective property listing.

Default

None.

fontFamily NN 6 IE 4 DOM 2
Read/Write
Provides a prioritized list of font families to be used to render the object's content. One or more font family names may be included in a comma-delimited list of property values. If a font family name consists of multiple words, the family name must be inside a set of inner quotes. Available in IE as a property of the style and runtimeStyle objects only, but the individual font properties are available in currentStyle, as well.

Example

document.getElementById("subhead").style.fontFamily = "'Century Schoolbook', Times, serif";

Value

Any number of font family names, comma delimited. Multiword family names must be quoted. Recognized generic family names are: serif | sans-serif | cursive | fantasy | monospace.

Default

Browser default.

fontSize NN 6 IE 4 DOM 2
Read/Write
Indicates the font size of the element. The font size can be set in several ways. A collection of constants (xx-small, x-small, small, medium, large, x-large, xx-large) defines what are known as absolute sizes. In truth, these are absolute only in a single browser in a single operating system, since the reference point for these sizes varies with browser and operating system (analogous to the old HTML font sizes of 1 through 7). But they do let the author have confidence that one element set to large is rendered larger than medium.
Another collection of constants (larger, smaller) is known as relative sizes. Because the font-size style attribute is inherited from the parent element, these relative sizes are applied to the parent element to determine the font size of the current element. It is up to the browser to determine exactly how much larger or smaller the font size is, and a lot depends on how the parent element's font size is set. If it is set with one of the absolute sizes (large, for example), a child's font size of larger means the font is rendered in the browser's x-large size. The increments are not as clear-cut when the parent font size is set with a length or percentage.
If you elect to use a length value for the fontSize property, you will achieve greater consistency across operating systems if units such as pixels (px) or ems (em), instead of points (pt). Em units are calculated with respect to the size of the parent element's font size. Finally, you can set fontSize to a percentage, which is calculated based on the size of the parent element's font size.

Example

document.getElementById("teeny").style.fontSize = "x-small";

Value

Case-insensitive string values from any of the following categories. For an absolute size, one of the following constants: xx-small | x-small | small | medium | large | x-large | xx-large. For a relative size, one of the following constants: larger | smaller. For a length, see the discussion about CSS length values at the beginning of Chapter 11. For a percentage, the percentage value and the % symbol.

Default

Parent element's font size.

fontSizeAdjust NN 6 IE 5(Mac) DOM 2
Read/Write
Provides the font aspect value, usually of the first font family in a font-family attribute sequence, forcing alternative font families to calculate their rendered font size to closely match that of the primary font family. Although this property is a member of the style object in IE 5/Mac and Netscape 6, neither the style attribute nor scripted changes to it affect the font display.

Example

document.getElementById("myDIV").style.fontSizeAdjust = "0.56";

Value

Numeric aspect value as a quoted string, or none.

Default

none

fontStretch NN 6 IE 5(Mac) DOM 2
Read/Write
Provides the character spacing for the element, based on available spacing widths available for the current font family. Although this property is a member of the style object in IE 5/Mac and Netscape 6, neither the style attribute nor scripted changes to it affect the font display.

Example

document.getElementById("myDIV").style.fontStretch= "ultra-condensed";

Value

String of allowable constant values: normal | wider | narrower | ultra-condensed | extra-condensed | condensed | semi-condensed | semi-expanded | expanded | extra-expanded | ultra-expanded, or none.

Default

none

fontStyle NN 6 IE 4 DOM 2
Read/Write
Specifies whether the element is rendered in a normal (roman), italic, or oblique font style. If the fontFamily includes font faces labeled Italic and/or Oblique, the setting of the fontStyle attribute summons those particular font faces from the browser's system. But if the specialized font faces are not available in the system, the normal font face is usually algorithmically slanted to look italic. Output sent to a printer with such font settings relies on the quality of arbitration between the client computer and printer to render an electronically generated italic font style. Personal computer software typically includes other kinds of font rendering under the heading of "Style." See fontVariant and fontWeight for other kinds of font "styles."

Example

document.getElementById("emphasis").style.fontStyle = "italic";

Value

One the following string constant values: normal | italic | oblique.

Default

normal

fontVariant NN 6 IE 4 DOM 2
Read/Write
Specifies whether the element should be rendered in all uppercase letters in such a way that lowercase letters of the source code are rendered in smaller uppercase letters. If a font family contains a small caps variant, the browser should use it automatically. More likely, however, the browser calculates a smaller size for the uppercase letters that take the place of source code lowercase letters. In practice, Internet Explorer 4 renders the entire source code content as uppercase letters of the same size as the parent element's font, regardless of the case of the source code. Later IE versions and Netscape 6 use two different uppercase sizes.

Example

document.getElementById("emphasis").style.fontVariant = "small-caps";

Value

Any of the following constant values as strings: normal | small-caps.

Default

normal

fontWeight NN 6 IE 4 DOM 2
Read/Write
Sets the weight (boldness) of the element's font. CSS provides a weight rating scheme that is more granular than most browsers render on the screen, but the finely tuned weights may come into play when the content is sent to a printer. The scale is a numeric rating from 100 to 900 at 100-unit increments. Therefore, a fontWeight of 100 would be the least bold that would be displayed, while 900 would be the boldest. A setting of normal (the default weight for any font) is equivalent to a fontWeight value of 400; the standard bold setting is equivalent to 700. Other settings (bolder and lighter) let you specify a weight relative to the parent element's weight.

Example

document.getElementById("hotStuff").style.fontWeight = "bold";

Value

Any of the following constant values: bold | bolder | lighter | normal | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900.

Default

normal

height, width NN 6 IE 4 DOM 2
Read/Write
Indicate the height and width (and their units) of the element. Because the values are strings containing the assigned units, you cannot use these properties for calculation. Grab copies of the numbers by using parseFloat( ) on the values; or for IE, use pixelHeight, pixelWidth, posHeight, and posWidth properties. Changes to these properties may not be visible unless the element has its position style attribute set.
In IE 6 standards compatibility mode (where document.compatType == "CSS1Compat"), these dimensions apply to only the content portion of an element, irrespective of borders, padding, or margins. For example, if a positioned element that is equipped with padding and borders must be sized to a precise rectangular size, you must subtract the thicknesses of the padding and borders from the height and width values so that the overall element is the desired size.

Example

document.getElementById("viewArea").style.height = "450px";

Value

String consisting of a numeric value and length measure or percentage.

Default

None.

imeMode NN n/a IE 5(Win) DOM n/a
Read/Write
Controls the presence of the Input Method Editor in IE for Windows for browser and system versions that support languages such as Chinese, Japanese, and Korean.

Example

document.getElementById("nameEntry").style.imeMode = "active";

Value

String of allowable constant values: active | auto | disabled | inactive.

Default

auto

layoutFlow NN n/a IE 5(Win) DOM n/a
Read/Write
Intended primarily for languages that display characters in vertical sentences, controls the progression of content. Replaced starting with IE 5.5 for Windows by the writingMode property.

Value

One of the constant values (as a string): horizontal | vertical-ideographic.

Default

horizontal

layoutGrid NN n/a IE 5(Win) DOM n/a
Read/Write
This is a shorthand property that lets you set one or more layout grid properties (layoutGridChar, layoutGridLine, layoutGridMode, and layoutGridType) with one assignment statement. These attributes are used primarily with Asian language content.

Example

document.getElementById("subhead").style.layoutGrid = "2em strict";

Value

For syntax and examples of value types for layoutGrid-related properties, see the respective property listing.

Default

None.

layoutGridChar NN n/a IE 5(Win) DOM n/a
Read/Write
Dictates the size of Asian language character grid for block-level elements.

Example

document.getElementById("subhead").style.layoutGrid Char= "auto";

Value

String consisting of an explicit CSS length value or auto or none.

Default

none

layoutGridLine NN n/a IE 5(Win) DOM n/a
Read/Write
Dictates the line height of Asian language character grid for block-level elements.

Example

document.getElementById("subhead").style.layoutGrid Line= "120%";

Value

String consisting of an explicit CSS length value or auto or none.

Default

none

layoutGridMode NN n/a IE 5(Win) DOM n/a
Read/Write
Specifies whether the Asian language character grid should be one- or two-dimensional.

Example

document.getElementById("subhead").style.layoutGrid Mode= "both";

Value

String constant values: both | char (for inline elements) | line (for block-level elements) | none.

Default

both

layoutGridType NN n/a IE 5(Win) DOM n/a
Read/Write
Controls how the layout grid responds to characters of varying width..

Example

document.getElementById("subhead").style.layoutGrid Type = "strict";

Value

String constant values: fixed | loose | strict.

Default

loose

left NN 6 IE 4 DOM 2
Read/Write
For positionable elements, defines the position of the left edge of an element's box (content plus left padding, border, and/or margin) relative to the left edge of the next outermost block content container. When the element is relative-positioned, the offset is based on the left edge of the inline location of where the element would normally appear in the content.
For calculations on this value, use parseFloat( ) on the returned value; or, in IE, retrieve the pixelLeft or posLeft properties, which return genuine numeric values.

Example

document.getElementById("blockD2").style.left = "45px";

Value

String consisting of a numeric value and length unit measure, a percentage, or auto.

Default

auto

letterSpacing NN 6 IE 4 DOM 2
Read/Write
Specifies the spacing between characters within an element. Browsers normally define the character spacing based on font definitions and operating system font rendering. Assigning a negative value tightens the spacing, but be sure to test the effect on the selected font for readability on different operating systems.

Example

document.body.style.letterSpacing = "1.1em";

Value

A string of a length value (with unit of measure) or normal. The best results are achieved by using units that are based on the rendered font size (em and ex). A setting of normal is how the browser sets the letters without any intervention.

Default

normal

lineBreak NN n/a IE 5(Win) DOM n/a
Read/Write
Controls line breaking rules for Japanese text.

Example

document.body.style.lineBreak = "strict";

Value

String constant values: normal | strict.

Default

normal

lineHeight NN 6 IE 4 DOM 2
Read/Write
Indicates the height of the inline box (the box holding one physical line of content). See the line-height style attribute in Chapter 11 for details on browser quirks and inheritance traits of different types of values.

Example
document.getElementById("tight").style.lineHeight = "1.1em";
Value

A string of a length value (with unit of measure) or normal.

Default

normal

listStyle NN 6 IE 4 DOM 2
Read/Write
This is a shorthand property for setting up to three list-style properties in one assignment statement. Whichever attributes you don't explicitly set with this attribute assume their default values. These properties define display characteristics for the markers automatically rendered for list items inside ol and ul elements. This is available in IE as a property of the style and runtimeStyle objects only, but individual properties are properties of currentStyle, as well.

Example

document.getElementById("itemList").style.listStyle = "square outside none";

Value

See the individual attribute entries for listStyleType, listStylePosition, and listStyleImage for details on acceptable values for each. You may include one, two, or all three values in the list-style attribute setting in any order you wish.

Default

None.

listStyleImage NN 6 IE 4 DOM 2
Read/Write
Provides the URL for an image that is to be used as the marker for a list item. Because this attribute can be inherited, a setting (including none) for an individual list item can override the same attribute or property setting in its parent.

Example

document.getElementById("itemList").style.listStyleImage = "url(images/3DBullet.gif)";

Value

Use none (as a string) to override an image assigned to a parent element. Otherwise, supply any valid full or relative URL (in the CSS URL format) to an image file with a MIME type that is readable by the browser.

Default

none

listStylePosition NN 6 IE 4 DOM 2
Read/Write
Specifies whether the marker is inside or outside (outdented) the box containing the list item's content. When listStylePosition is set to inside and the content is text, the marker appears to be part of the text block. In this case, the alignment (indent) of the list item is the same as normal, but without the outdented marker.

Example

document.getElementById("itemList").style.listStylePosition = "inside";

Value

Either constant value as a string: inside | outside.

Default

outside

listStyleType NN 6 IE 4 DOM 2
Read/Write
Specifies the kind of item marker to be displayed with each item. This attribute is applied only if listStyleImage is none (or not specified). The constant values available for this attribute are divided into two categories. One set is used with ul elements to present a filled disc, an empty circle, or a filled square (except empty square on IE 4 for Macintosh). The other set is for ol elements, which has list items that can be marked in sequences of arabic numerals, roman numerals (uppercase or lowercase), letters of the alphabet (uppercase or lowercase), and some other character sequences of other languages if the browser and operating system supports those languages.

Example

document.getElementById("itemList").style.listStyleType = "circle";

Value

One constant value as a string that is relevant to the type of list container. For ul: circle | disc | square. For ol: decimal | decimal-leading-zero | lower-roman | upper-roman | lower-greek | lower-alpha | lower-latin | upper-alpha | upper-latin | hebrew | armenian | georgian | cjk-ideographic | hiragana | katakana | hiragana-iroha | katakana-iroha. Commonly-supported ol element sequences are treated as shown in the following table.

Type

Example

decimal

1, 2, 3, ...

decimal-leading-zero

01, 02, 03, ...

lower-alpha

a, b, c, ...

lower-greek

α, β, γ, ...

lower-roman

i, ii, iii, ...

upper-alpha

A, B, C, ...

upper-roman

I, II, III, ...

Default

disc (for ul); decimal (for ol).

margin NN 6 IE 4 DOM 2
Read/Write
This is a shortcut property that can set the margin widths of up to four edges of an element with one statement. A margin is space that extends beyond the border of an element to provide extra empty space between adjacent or nested elements, especially those that have border attributes set. You may supply one to four space-delimited margin values. The number of space-delimited values determines which sides receive the assigned margins.

Example

document.getElementById("logoWrapper").style.margin = "5px 8px";

Value

This property accepts one, two, three, or four space-delimited values inside one string, depending on how many and which margins you want to set. See the margin attribute listing in Chapter 11 for complete details on how the number of values affects this property. Values for the margins can be lengths, percentages of the next outermost element size, or the auto constant.

Default

0

marginBottom, marginLeft, marginRight, marginTop NN 6 IE 4 DOM 6
Read/Write
All four properties set the width of a single margin edge of an element. A margin is space that extends beyond the element's border and is not calculated as part of the element's width or height.

Example

document.getElementById("logoWrapper").style.marginTop = "5px"; document.getElementById("navPanel").style.marginLeft = "10%";

Value

Values for margin widths can be length values, percentages of the next outermost element size, or the auto constant.

Default

0

markerOffset NN 6 IE n/a DOM n/a
Read/Write
Controls the space between list item markers (which occupy their own box in the CSS box model) and the box that contains the list item text. Although the property is available for Netscape 6, the value is an empty string and the rendered content does not change if you assign it a new value.

Value

A string of a length value (with unit of measure) or auto.

Default

None.

marks NN 6 IE 5(Mac) DOM 2
Read/Write
Sets crop mark type for an @page rule. Although the property is available for IE 5 Macintosh and Netscape 6, the values are empty strings and the rendered content does not change if you assign it a new value.

Value

Case-insensitive string of any of the following constants: crop | cross | none.

Default

none

maxHeight, maxWidth, minHeight, minWidth NN 6 IE (See text) DOM 2
Read/Write
Define loose heights and widths for an element so that, for "max" properties, an element is allowed to grow no bigger in the designated dimension, or, for "min" properties, an element can expand in the designated dimension to accommodate more than expected content or rendering situations. Although the property is available for IE 5 Macintosh and Netscape 6, it is either ignored (IE 5 for Mac) or buggy (Netscape 6). IE 6 for Windows supports only the minWidth property, and it can be used only for tr, th, and td elements.

Value

CSS length value (see Chapter 11) as a string.

Default

None.

MozBinding NN 6 IE n/a DOM n/a
Read/Write
Points to the URL of an XML document designed to enhance an existing element or create a new interface element. Based on Mozilla XBL (Extensible Bindings Language). For more details, visit http://www.mozilla.org/unix/customizing.html.

Value

CSS URL value string or none.

Default

None.

MozOpacity NN 6 IE n/a DOM n/a
Read/Write
Defines the level of opacity of the element. The lower the value, the more transparent the element becomes. This is the proprietary Mozilla version of the proprietary Microsoft opaque filter.

Example

document.getElementById("menuWrapper").style.MozOpacity = "40%";

Value

Numeric string value between 0 and 1 or string percentage value between 0% and 100%.

Default

100% (completely opaque)

orphans, widows NN 6 IE 5(Mac) DOM 2
Read/Write
For a block-level element's content that spreads across page boxes, specify the minimum number of lines of the element that must appear at the bottom of the page (orphans) or at the top of the next page (widows). Although these properties are members of the style object in IE 5/Mac and Netscape 6, neither the style attribute nor scripted changes to it affect the printed output.

Example

document.getElementById("sec23").style.orphans = "3";

Value

Integer as a string.

Default

None.

outline NN 6 IE 5(Mac) DOM 2
Read/Write
This is a shorthand property for getting or setting the outlineColor, outlineStyle, and/or outlineWidth properties of an outline around an element in one statement. You must specify an outline style (see outlineStyle) for changes of this property to affect the display. An outline is like a border, but overlays the element without occupying any content space or affecting the element's dimensions. Although this property is a member of the style object in IE 5/Mac and Netscape 6, only IE 5/Mac renders the outline.

Exaple

document.getElementById("announce").style.outline = "solid blue 4px";

Value

Space-delimited string. For the outlineStyle and outlineWidth component values, see the respective properties in this chapter. For details on the outlineColor value, see the section about CSS colors at the beginning of Chapter 11.

Default

None.

outlineColor NN 6 IE 5(Mac) DOM 2
Read/Write
Controls the color of an outline.

Example

document.getElementById("announce").style.outlineColor = "rgb(100, 75, 0)";

Value

CSS color value or constant invert. For details on CSS color values, see the section about colors at the beginning of Chapter 11.

Default

invert

outlineStyle NN 6 IE 5(Mac) DOM 2
Read/Write
Controls the line type of an outline.

Example

document.getElementById("announce").style.outlineStyle = "solid";

Value

Style values are case-insensitive constants that are associated with specific ways of rendering outline (and border) lines. The CSS style constants are: dashed, dotted, double, groove, hidden, inset, none, outset, ridge, and solid.

Default

none

outlineWidth NN 6 IE 5(Mac) DOM 2
Read/Write
Controls the thickness of the outline lines.

Example

document.getElementById("announce").style.outlineWidth = "2px";

Value

Three case-insensitive constants—thin | medium | thick—allow the browser to define exactly how many pixels are used to show the border. For more precision, you can also assign a length value (see the discussion of CSS length values at the beginning of Chapter 11).

Default

medium

overflow NN 6 IE 4 DOM 2
Read/Write
Specifies how a positioned element should treat content that extends beyond the boundaries established in the style sheet rule. See the discussion of the overflow style sheet attribute in Chapter 11 for details.

Example
document.getElementById("myDiv").style.overflow = "scroll";
Value

Any of the following constants as a string: auto | hidden | scroll | visible.

Default

visible

overflowX, overflowY NN n/a IE 5(Win) DOM n/a
Read/Write
Specify how a positioned element should treat content that extends beyond the horizontal (overflowX) or vertical (overflowY) boundaries established in the style sheet rule.

Example

document.getElementById("myDiv").style.overflow X= "scroll";

Value

Any of the following constants as a string: auto | hidden | scroll | visible.

Default

visible

padding NN 6 IE 4 DOM 2
Read/Write
This is a shortcut property that can set the padding widths of up to four edges of an element with one statement. Padding is space that extends around the content box of an element up to but not including any border that may be specified for the element. Padding picks up the background image or color of its element. As you add padding to an element, you increase the size of the visible rectangle of the element without affecting the content block size. You may supply one to four space-delimited padding values. The number of values determines which sides receive the assigned padding.

Example

document.getElementById("logoWrapper").style.padding = "3px 5px";

Value

This property accepts one, two, three, or four space-delimited values inside one string, depending on how many and which edges you want to pad. See the padding attribute listing in Chapter 11 for complete details on how the number of values affects this property. Values for padding widths can be lengths, percentages of the next outermost element size, or the auto constant.

Default

0

paddingBottom, paddingLeft, paddingRight, paddingTop NN 6 IE 4 DOM 2
Read/Write
All four properties set the width of a single padding edge of an element. Padding is space that extends between the element's border and content box. Padding is not calculated as part of the element's width or height.

Example

document.getElementById("logoWrapper").style.paddingTop = "3px"; document.getElementById("navPanel").style.paddingLeft = "10%";

Value

Values for padding widths can be length values, percentages of the next outermost element size, or the auto constant.

Default

0

page NN 6 IE 5(Mac) DOM 2
Read/Write
Points to the name of an existing @page rule (when the rule contains an identifier, such as @page figures {size: landscape}) in order to apply that rule to the current block-level element. Although this property is a member of the style object in IE 5/Mac and Netscape 6, neither the style attribute nor scripted changes to it affect the printed output.

Value

String identifier.

Default

None.

pageBreakAfter, pageBreakBefore NN 6 IE 4 DOM 2
Read/Write
Define how content should treat a page break around an element when the document is sent to a printer. Page breaks are not rendered in the visual browser as they may be in word processing programs; on screen, long content flows in one continuous scroll on the screen. Also see the extensive discussion of page breaks in the listing for the page-break-after and page-break-before style attributes in Chapter 11.

Example
document.getElementById("hardBR").style.pageBreakAfter = "always";
document.getElementById("navPanel").style.paddingLeft = "10%";
Value

All supporting browsers recognize four constant values (as strings): always | auto | left | right. Additionally, IE for Windows supports an empty string, which has the same effect as the W3C CSS avoid constant.

Default

auto

pageBreakInside NN 6 IE 5(Mac) DOM 2
Read/Write
Defines whether the element allows itself to be split across printed pages. Although this property is a member of the style object in IE 5/Mac and Netscape 6, neither the style attribute nor scripted changes to it affect the printed output.

Value

A constant value (as a string): auto | avoid.

Default

auto

pause, pauseAfter, pauseBefore, pitch, pitchRange
See azimuth.

pixelBottom, pixelLeft, pixelRight, pixelTop NN n/a IE 4 DOM n/a
Read/Write
For positionable elements, these properties define the pixel position of the edges of an element's box (content plus padding, border, and/or margin) relative to the corresponding edges of the next outermost block content container. When the element is relative-positioned, the measure is based on the edges of the inline location of where the element would normally appear in the content. Use these properties for calculation (including path animation) instead of the bottom, left, right, and top properties, which store their values as strings with the unit names. Available as a property of the IE style and runtimeStyle objects only.

Example

document.getElementById("myDIV").style.pixelLeft++;

Value

Integer.

Default

None.

pixelHeight, pixelWidth NN n/a IE 4 DOM n/a
Read/Write
Specify the height and width of the element in pixels. Use these properties for calculation instead of properties such as height and width, which return strings including units. Changes to these properties may not be visible unless the element has its position style attribute set. Available as a property of the IE style and runtimeStyle objects only.

Example

var midWidth = document.getElementById("myDIV").style.pixelWidth/2;

Value

Integer

Default

None.

playDuring
See azimuth.

posBottom, posLeft, posRight, posTop NN n/a IE 4 DOM n/a
Read/Write
For positionable elements, these properties define the position of the edges of an element's box (content plus padding, border, and/or margin) relative to the corresponding edges of the next outermost block content container. When the element is relative-positioned, the measure is based on the edges of the inline location where the element would normally appear in the content. Most importantly, these properties' values are numeric and in the unit of measure set in the CSS bottom, left, right, or top attribute. Use these properties for calculation (including path animation) instead of the bottom, left, right, and top properties, which store their values as strings with the unit names. All math is in the specified units. Also contrast these properties with the pixelBottom, pixelLeft, pixelRight, and pixelTop properties, which are integer values for pixel measures only. Available as a property of the IE style and runtimeStyle objects only.

Example

document.getElementById("myDIV").style.posLeft = document.getElementById("myDIV").style.posLeft + 1.5;

Value

Floating-point number.

Default

None.

posHeight, posWidth NN n/a IE 4 DOM n/a
Read/Write
Specify the numeric height and width of the element in the units set by the CSS positioning-related attributes. Use these properties for calculation instead of properties such as height and width, which return strings including units. All math is in the specified units. Also contrast these properties with the pixelHeight and pixelWidth properties, which are integer values for pixel measures only. Available as a property of the IE style and runtimeStyle objects only.

Example

document.getElementById("myDIV").style.posWidth = 10.5;

Value

Floating-point number.

Default

None.

position NN 6 IE 4 DOM 2
Read-only
For positionable elements, returns the value assigned to the style sheet position attribute. This property is actually read/write, but you cannot change a positioned element into a static one or vice-versa.

Example

var posType = document.getElementById("myDIV").style.position;

Value

String constant: absolute | fixed | relative | static. The fixed value is not supported in IE for Windows through Version 6.

Default

None.

quotes NN 6 IE 5(Mac) DOM 2
Read/Write
Assigns pairs of characters to be used as quote marks (especially for the q element). Although the property is available for IE 5 Macintosh and Netscape 6, only Netscape 6 responds to the CSS attributes, and neither responds to reading or writing the quotes property value.

Value

A string consisting of two or four quoted strings (nested quotes). The first pair provides characters for first-level quotes; the second pair supplies characters to nested quotes.

Default

None.

richness
See azimuth.

right NN 6 IE 5 DOM 2
Read/Write
For an absolute-positioned element, defines the position of the right edge of an element's box (content plus right padding, border, and/or margin) relative to the right edge of the next outermost block content container.
For numeric calculations on this value in IE, retrieve the pixelRight or posRight style properties, which return genuine numeric values.

Example

document.getElementById("blockD2").style.right = "25px";

Value

String consisting of a numeric value and length unit measure, a percentage, or auto.

Default

auto

rubyAlign NN n/a IE 5 DOM n/a
Read/Write
Controls alignment of content in a ruby element. Changes to this property affect IE for Windows only. Ruby-related styles are defined in CSS3.

Example

document.getElementById("myRuby").style.rubyAlign = "center";

Value

Case-insensitive string of any of the following constants: auto | center | distribute-letter | distribute-space | left | line-edge | right.

Default

auto

rubyOverhang NN n/a IE 5 DOM n/a
Read/Write
Controls text overhang characteristics of content in a ruby element. Changes to this property affect IE for Windows only. Ruby-related styles are defined in CSS3.

Example

document.getElementById("myRuby").style.rubyOverhang="whitespace";

Value

Case-insensitive string of any of the following constants: auto | none | whitespace.

Default

auto

rubyPosition NN n/a IE 5 DOM n/a
Read/Write
Controls whether ruby (rt element) text renders on the same line or above its related ruby base (rb element) text. Changes to this property affect IE for Windows only. Ruby-related styles are defined in CSS3.

Example

document.getElementById("myRuby").style.rubyPosition = "inline";

Value

Case-insensitive string of any of the following constants: above | inline.

Default

above

scrollbar3dLightColor, scrollbarArrowColor, scrollbarBaseColor, scrollbarDarkShadowColor, scrollbarFaceColor, scrollbarHighlightColor, scrollbarShadowColor, scrollbarTrackColor NN n/a IE 5.5(Win) DOM n/a
Read/Write
Controls the colors for specific components of a scrollbar user interface element associated with an applet, body, div, embed, object, or textarea element. See the description of these CSS attributes in Chapter 11 for details about which component each property governs.

Example
document.getElementById("comments").style.scrollbarArrowColor = "rgb(100, 75, 0");
Value

Case-insensitive CSS color specification (see discussion at beginning of Chapter 11).

Default

None.

size NN 6 IE n/a DOM 2
Read/Write
For a page context defined by an @page rule, this property controls the page size or orientation. Although the property is available for Netscape 6, the value is an empty strings and the property has no influence over the page context.

Value

CSS length values (as a string) or case-insensitive string of any of the following constants: auto | landscape | portrait. For length values, a single value is applied to height and width; two space-delimited length values are applied to width and height, respectively.

Default

auto

speak, speakHeader, speakNumeral, speakPunctuation, speechRate, stress
See azimuth.

styleFloat NN n/a IE 4 DOM n/a
Read/Write
Specifies on which side of the containing box the element aligns so that other content wraps around the element. When the property is set to none, the element appears in its source code sequence, and at most one line of surrounding text content appears in the same horizontal band as the element. See the float style attribute in Chapter 11 for more details. IE 5 for Macintosh duplicates this property as cssFloat, the DOM 2 version, which is also supported (by itself) in Netscape 6.

Example
document.getElementById("myDIV").style.styleFloat = "right";
Value

One of the following constants (as a string): none | left | right.

Default

None.

tableLayout NN 6 IE 5 DOM 2
Read/Write
Acts as a switch at load time to direct the browser to start rendering the table based on column widths set by the first row, or wait until the table data is loaded so that the browser can calculate optimum column widths based on cell contents. Changes to this property have no effect on a rendered table.

Example

document.getElementById("myTable").style.tableLayout = "fixed";

Value

One of the following constants (as a string): auto | fixed.

Default

auto

textAlign NN 6 IE 4 DOM 2
Read/Write
Determines the horizontal alignment of text within an element's box.

Example

document.getElementById("myDIV").style.textAlign = "right";

Value

One of the four constants (as a string): center | justify | left | right.

Default

Depends on default language of the browser.

textAlignLast NN n/a IE 5.5(Win) DOM n/a
Read/Write
Determines the horizontal alignment of the last line of text within an element's box. This style attribute may be helpful to obtain the desired look if you use some of the other proprietary text alignment style attributes in IE 5.5 or later for Windows.

Example

document.getElementById("myDIV").style.textAlignLast = "justify";

Value

One of the following constants (as a string): auto | center | justify | left | right.

Default

auto

textAutospace NN n/a IE 5(Win) DOM n/a
Read/Write
Controls the spacing between ideographic (typically Asian languages) and nonideographic characters.

Example

document.getElementById("myDIV").style.textAutospace = "ideograph-numeric";

Value

One of the following constants (as a string): ideograph-alpha | ideograph-numeric | ideograph-parenthesis | ideograph-space | none.

Default

none

textDecoration NN 6 IE 4 DOM 2
Read/Write
Specifies additions to the text content of the element in the form of underlines, strikethroughs, overlines, and (in Navigator and CSS) blinking. Browsers use this style attribute internally to assign by default underlines to a elements and strikethroughs to strike elements, so the default value varies with element type. You may specify more than one decoration style by supplying values in a space-delimited list. While browsers accept the (CSS optional) blink value, they (thankfully) do not cause the text to blink. Text decoration has an unusual parent-child relationship. Values are not inherited, but the effect of a decoration carries over to nested items in most cases. Therefore, unless otherwise overridden, an underlined p element underlines a nested b element within. Internet Explorer also includes Boolean properties for each decoration type.

Example

document.getElementById("emphasis").style.textDecoration = "underline";

Value

In addition to none, any of the following four constants (as a string): blink | line-through | overline | underline. Multiple values may be included in the string as a space-delimited list.

Default

Element and internal style sheet dependent.

textDecorationBlink, textDecorationLineThrough, textDecorationNone, textDecorationOverline, textDecorationUnderline NN n/a IE 4 DOM n/a
Read/Write
Specifies whether the specified text decoration feature is enabled for the element. Each of these properties corresponds to a value that can be assigned to the text-decoration style attribute in CSS (see Chapter 11). Internet Explorer does not blink text, so the textDecorationBlink property is ignored. Setting textDecorationNone to true sets all other related properties to false. Setting these properties on the Macintosh version of IE 4 does not alter the content. Use the textDecoration property instead—good practice all around.

Example
document.getElementById("emphasis").style.textDecorationLineThrough = "true";
Value

Boolean value: true | false.

Default

false

textIndent NN 6 IE 4 DOM 2
Read/Write
Specifies the size of the indent at the first line of a block of inline text (such as a p element). Only the first line is affected by this setting. A negative value can be used to outdent the first line, but be sure the text does not run beyond the left edge of the browser window or frame.

Example

document.getElementById("firstGraph").style.textIndent = "0.5em";

Value

Positive or negative CSS length value (see Chapter 11) as a string.

Default

0px

textJustify NN n/a IE 5 DOM n/a
Read/Write
Specifies detailed character distribution techniques for any block-level element that has a text-align CSS attribute or a textAlign style property set to justify.

Example

document.getElementById("inset").style.textJustify = "distribute-center-last";

Value

One of the following constants (as a string): auto | distribute | distribute-all-lines | distribute-center-last | inter-cluster | inter-ideograph | inter-word | kashdia | newspaper. See the text-justify attribute in Chapter 11 for details on the meanings of these values.

Default

auto

textKashidaSpace NN n/a IE 5.5(Win) DOM n/a
Read/Write
For Arabic text in a block-level element with a text alignment style that is set to justify, controls the ratio of kashida expansion to white space expansion.

Example

document.getElementById("inset").style.textKashidaSpace = "15%";

Value

Percentage value as a string.

Default

0%

textOverflow NN n/a IE 6(Win) DOM n/a
Read/Write
Controls whether text content that overflows a fixed box should display an ellipsis (...) at the end of the line to indicate more text is available. The element should also have its overflow style attribute or property set to hidden.

Example

document.getElementById("textBox").style.textOverflow = "ellipsis";

Value

One of the allowable constant string value: clip | ellipsis.

Default

clip

textShadow NN 6 IE 5(Mac) DOM 2
Read/Write
Controls the specifications for shadow effects on the element's text. Although this property is a member of the style object in IE 5/Mac and Netscape 6, neither the style attribute nor scripted changes to it affect the element's text display.

Value

A string consisting of one or more shadow specifications. Each shadow specification consists of space-delimited values for a color, a length for the offset to the right of the text, a length for the offset below the text, and an optional blur radius value. Multiple shadow specifications are comma-delimited or a value of none to turn off the shadow.

Default

none

textTransform NN 6 IE 4 DOM 2
Read/Write
Controls the capitalization of the element's text. When a value other than none is assigned to this attribute, the cases of all letters in the source text are arranged by the style sheet, overriding the case of the source text characters.

Example

document.getElementById("heading").style.textTransform = "capitalize";

Value

A value of none allows the case of the source text to be rendered as is. Other available constant values (as strings) are: capitalize | lowercase | uppercase. A value of capitalize sets the first character of every word to uppercase. Values lowercase and uppercase render all characters of the element text in their respective cases.

Default

none

textUnderlinePosition NN n/a IE 5.5(Win) DOM n/a
Read/Write
Controls whether an underline (i.e., an element with a text-decoration style set to underline) is rendered above or below the text.

Example

document.getElementById("heading").style.textUnderlinePosition = "above";

Value

IE 5.5 recognizes two constant values: above | below. IE 6 adds the values auto and auto-pos (which appear to do the same thing). The default value also changed between versions, from below to auto. In IE 6, the auto value underlines vertical Japanese text "above" (to the right) of the characters.

Default

none (IE 5.5); auto (IE 6).

top NN 6 IE 4 DOM 2
Read/Write
For positionable elements, defines the position of the top edge of an element's box (content plus top padding, border, and/or margin) relative to the top edge of the next outermost block content container. When the element is relative-positioned, the offset is based on the top edge of the inline location of where the element would normally appear in the content.
For calculations on this value, use parseFloat( ) on the returned value; or, in IE, retrieve the pixelTop or posTop properties, which return genuine numeric values.

Example

document.getElementById("blockD2").style.top = "40px";

Value

String consisting of a numeric value and length unit measure, a percentage, or auto.

Default

auto

unicodeBidi NN 6 IE 5 DOM 2
Read/Write
Controls the embedding of bidirectional text (such as a mixture of French and Arabic) in concert with the direction style attribute.

Example

document.getElementById("blockD2").style.unicodeBidi = "bidi-override";

Value

String constant values: bidi-override | embed | normal.

Default

normal

verticalAlign NN 6 IE 4 DOM 2
Read/Write
Specifies the vertical alignment characteristic of the element. This property operates in two spheres, depending on the selection of values you use. See the in-depth discussion of the vertical-align style sheet property in Chapter 11 for details.

Example
document.getElementById("myDIV").style.verticalAlign = "text-top";
Value

String value of an absolute measure (with units), a percentage (relative to the next outer box element), or one of the many constant values: bottom | top | baseline | middle | sub | super | text-bottom | text-top.

Default

baseline

visibility NN 6 IE 4 DOM 2
Read/Write
Specifies the state of the positioned element's visibility. Surrounding content does not close up the space left by an element that has its visibility property set to hidden.

Example

document.getElementById("myDIV").style.visibility = "hidden";

Value

One of the constant values (as a string): collapse | hidden | inherit | visible.

Default

visible

voiceFamily, volume
See azimuth.

whiteSpace NN 6 IE 5(Mac)/5.5(Win) DOM 2
Read/Write
Controls intepretation of whitespace (such as leading spaces and line breaks) from the source code.

Example

document.getElementById("myDIV").style.whiteSpace = "pre";

Value

One of the constant values (as a string): normal | nowrap | pre. Value of normal allows browsers to word-wrap lines in block elements and ignore leading spaces. Value of nowrap causes source code not to word-wrap, but still ignores leading spaces. Value of pre preserves leading spaces, extra spaces, and carriage returns in the source code. Note that IE 6 for Windows does not respond to the pre value unless the DOCTYPE element values place the browser into standards compatibility mode.

Default

normal

widows
See orphans.

width
See height.

wordBreak NN n/a IE 5(Win) DOM n/a
Read/Write
Specifies the word-break style for ideographic languages or content that mixes Latin and ideographic languages.

Example

document.getElementById("myDIV").style.wordBreak = "keep-all";

Value

One of the constant values (as a string): break-all | keep-all | normal.

Default

normal

wordSpacing NN 6 IE 4 DOM 2
Read/Write
Governs the length of space between words. IE 5 for Macintosh may exhibit overlap problems with the word-spacing of elements nested inside the one being controlled.

Example

document.getElementById("myDIV").style.wordSpacing = "1.0em";

Value

CSS length value (as a string) or the constant normal.

Default

normal

wordWrap NN n/a IE 5.5(Win) DOM n/a
Read/Write
Specifies the word-wrapping style for block-level, specifically-sized inline, or positioned elements. If a single word (i.e., without any whitespace) extends beyond the width of the element containing box, the normal behavior is to extend the content beyond the normal box width, without breaking. But you can force the long word to break at whatever character position occurs at the edge of the box.

Example

document.getElementById("myDIV").style.wordWrap = "break-word";

Value

One of the constant values (as a string): break-word | normal.

Default

normal

writingMode NN n/a IE 5.5(Win) DOM n/a
Read/Write
Intended primarily for languages that display characters in vertical sentences, this controls the progression of content, left-to-right, or right-to-left.

Example

document.getElementById("myDIV").style.writingMode = "lr-tb";

Value

One of the constant values (as a string): lr-tb | tb-rl. Value of tb-rl can rotate text of some languages by 90 degrees.

Default

lr-tb

zIndex NN 6 IE 4 DOM 2
Read/Write
For a positioned element, this specifies the stacking order relative to other elements within the same parent container. See Chapter 4 for details on relationships of element layering amid multiple containers.

Example
document.getElementById("myDIV").style.zIndex = "3"
Value

Integer. Netscape 6 prefers that this value be in string form (that's how the property returns its value), while IE returns a number.

Default

0

zoom NN n/a IE 5.5(Win) DOM n/a
Read/Write
Governs the magnification of rendered content. Particularly useful for output that might be displayed on monitors with very high pixel density. See screen.logicalXDPI property.

Example

document.body.style.zoom = "200%";

Value

Percentage value (where 100% is normal), floating-point multiplier (where 1.0 is normal), or constant normal.

Default

normal

getPropertyCSSValue( ) NN n/a IE n/a DOM 2
getPropertyCSSValue("CSSAttributeName")
Returns an object that represents a CSS value. In the W3C DOM, the CSSValue object returned from this method has properties that reveal the text of the attribute/value pair and a numeric value corresponding to a long list of primitive value types (indicating types such as percentage, pixel lengths, and RGB color). Although this method is implemented in Netscape 6, it returns an empty object for now.

Returned Value

Reference to a CSSValue object.

Parameters

CSSAttributeName

The CSS attribute name from an inline style declaration (not the DOM version of the property name).

getPropertyPriority( ) NN 6 IE 5(Mac) DOM 2
getPropertyPriority("CSSAttributeName")
Returns the string value of any priority (such as !important) associated with the inline CSS attribute.

Returned Value

String.

Parameters

CSSAttributeName

The CSS attribute name from an inline style declaration (not the DOM version of the property name).

getPropertyValue( ) NN 6 IE 5(Mac) DOM 2
getPropertyValue("CSSAttributeName")
Returns the string value of the inline CSS attribute/value pair.

Returned Value

String.

Parameters

CSSAttributeName

The CSS attribute name from an inline style declaration (not the DOM version of the property name).

item( ) NN 6 IE 5(Mac) DOM 2
item(index)
Returns the attribute name of the inline CSS attribute/value pair corresponding to the integer index value in source code order.

Returned Value

String. IE for Macintosh returns name in all-uppercase characters, while Netscape 6 returns all-lowercase characters.

Parameters

index

Zero-based integer corresponding to the specified inline CSS attribute/value pair in source code order.

removeProperty( ) NN 6 IE n/a DOM 2
removeProperty("CSSAttributeName")
Deletes the inline CSS attribute/value pair and returns a string with the previous value.

Returned Value

String.

Parameters

CSSAttributeName

The CSS attribute name from an inline style declaration (not the DOM version of the property name).

setProperty( ) NN 6 IE 5(Mac) DOM 2
setProperty("CSSAttributeName", "value", "priority")
Sets an inline style attribute/value pair. If the attribute already exists, the new value is applied to the existing attribute; otherwise the attribute and value are added to the element.

Returned Value

None.

Parameters

CSSAttributeName

The CSS attribute name from an inline style declaration (not the DOM version of the property name).

value

String of the value in the format applicable to the attribute.

priority

String of the priority assignment (such as !important) or empty string.

styleSheet NN 6 IE 4 DOM 2

The styleSheet object represents a style sheet that may have been created as a style element or imported with a link element or @import statement inside a style element. This object is different from the style element object, which strictly reflects the style HTML element and its attributes. The document.styleSheets[] collection contains zero or more styleSheet objects. The shared disabled property is available in all supporting browsers, facilitating the enabling and disabling of entire style sheets with simple Boolean assignments.

Object Model Reference

[window.]document.styleSheets[i]

Object-Specific Properties

`cssRules[]`	`cssText`	`href`	`imports[]`	`media`
`ownerNode`	`ownerRule`	`owningElement`	`pages[]`	`parentStyleSheet`
`readOnly`	`rules[]`	`title`	`type`

Object-Specific Methods

addImport( )

addRule( )

deleteRule( )

insertRule( )

removeRule( )

Object-Specific Event Handler Properties

None.

cssRules[ ] NN 6 IE 5(Mac) DOM 2
Read-only
Returns a collection of cssRule objects nested within the current styleSheet object. The IE-only equivalent is the rules property. See the cssRules object earlier in this chapter for a description of this collection object's property and methods; see the cssRule object earlier in this chapter for a description of the individual members of this collection.

Example

var allCSSRules = document.styleSheets[0].cssRules;

Value

Reference to a CSSRules collection object.

Default

Array of zero length.

cssText NN n/a IE 5 DOM n/a
Read/Write
Contains the entire text (as a string) of all rules defined in the style sheet. This is useful primarily if you wish to replace the entire set of rules with a new set. To act on the text of an individual rule in IE, access the cssText property of a single rule object (obtained by the styleSheet object's rules[i].cssText property); or, in Netscape 6, you can use the cssRules[i].cssText property.

Example

var allCSSText = document.styleSheets[0].cssText;

Value

String.

Default

Empty string.

href NN 6 IE 4 DOM 2
Read/Write
This is the URL specified by a link element's href attribute (when the link is used to import a style sheet). This value is read/write in IE for Windows, but read-only in Netscape 6 and IE/Mac.

Example

document.styleSheets[1].href = "css/altStyles.css";

Value

String of complete or relative URL.

Default

None.

imports[ ] NN n/a IE 4 DOM n/a
Read-only
Returns a collection (array) of styleSheet objects imported into an explicit styleSheet object via the @import rule. See the imports collection object earlier in this chapter for further discussion. For Netscape 6, you must loop through all cssRule objects of a styleSheet object in search of those with type property values equal to 3 (the same as the cssRule object's IMPORT_RULE constant).

Example

var allImportRules = document.styleSheets[0].imports;

Value

Reference to an imports collection object.

Default

Array of zero length.

media NN 6 IE 4 DOM 2
Read/Write
Specifies the intended output device for the content governed by the style sheet (reflecting the media attribute of the link and style elements). The media property looks forward to the day when browsers are able to tailor content to specific kinds of devices such as pocket computers, text-to-speech digitizers, or fuzzy television sets. This property is not available in IE 4/Macintosh.

Example

if (document.styleSheets[2].media == "print") { // process for print output }

Value

Any one of the following constant values as a string: all | print | screen.

Default

all

ownerNode NN 6 IE n/a DOM 2
Read-only
Returns a reference to the document tree node that contains the styleSheet object. This node is either a style or link element, depending on the way the style sheet is defined in the document. The IE (Windows and Mac) equivalent property is owningElement. IE for the Macintosh provides an extra owningNode property, which is very likely a mistaken implementation of the W3C DOM ownerNode property.

Example

var mama = document.styleSheets[2].ownerNode;

Value

Object reference.

Default

None.

ownerRule NN 6 IE n/a DOM 2
Read-only
For a styleSheet object brought into the document via an @import rule, returns a reference to that @import rule object (a W3C DOM CSSImportRule object). The cssRule object earlier in this chapter provides the properties and methods that apply to a CSSImportRule object. For other style sheet types, the property returns null.

Example

var hostRule = document.styleSheets[2].ownerRule;

Value

Object reference or null.

Default

null

owningElement NN n/a IE 4 DOM n/a
Read-only
Returns a reference to the style or link element object that defines the current styleSheet object. Each document maintains a collection of style sheets created with both the style and link elements. The comparable Netscape 6 property is ownerNode.

Example

var firstStyleID = document.styleSheets[0].owningElement.id;

Value

Element object reference.

Default

None.

pages[ ] NN n/a IE 5.5(Win) DOM n/a
Read-only
Returns a collection (array) of page objects (@page rules) nested within a styleSheet object. For Netscape 6, you must loop through all cssRule objects of a styleSheet object in search of those with type property values equal to 6 (the same as the cssRule object's PAGE_RULE constant). See the page object.

Example

var allPageRules = document.styleSheets[0].pages;

Value

Reference to a pages collection object.

Default

Array of zero length.

parentStyleSheet NN 6 IE 4 DOM 2
Read-only
For a styleSheet object generated by virtue of inclusion with an @page rule, the parentStyleSheet property returns a reference to the styleSheet (created as a link or style element) object that imported the current style sheet. For a nonimported style sheet, the property returns null.

Example

var myMaker = document.styleSheets[0].parentStyleSheet;

Value

Reference to a styleSheet object.

Default

null

readOnly NN n/a IE 4 DOM n/a
Read-only
Specifies whether the style sheet can be modified under script control. Style sheets imported through a link element or an @import rule cannot be modified, so they return a value of true.

Value

Boolean value: true | false.

Default

false

rules[ ] NN n/a IE 4 DOM n/a
Read-only
Returns a collection of rule objects nested within the current styleSheet object. The W3C DOM equivalent (implemented in Netscape 6 and IE 5/Mac) is the cssRules property. See the cssRules object earlier in this chapter for a description of this collection object's property and methods; see the cssRule object earlier in this chapter for a description of the individual members of this collection.

Example

var allrules = document.styleSheets[0].rules;

Value

Reference to a rules collection object.

Default

Array of zero length.

title NN 6 IE 4 DOM 2
Read/Write
Exposes the title attribute of the style or link element that owns the current styleSheet object. Since the attribute does not affect user interface elements (the elements are unrendered, and thus don't show tool tips), it is available to convey other string information to the styleSheet object under script control.

Example

if (document.styleSheets[2].title == "corpStyleWindows") { // process for the designated style }

Value

String value.

Default

Empty string.

type NN 6 IE 4 DOM 2
Read-only
Returns the style sheet MIME type specified by the type attribute of the style or link element.

Example

if (document.styleSheets[0].type == "text/css") { ... }

Value

String (text/css for typical CSS style sheets).

Default

None.

addImport( ) NN n/a IE 4 DOM n/a
addImport(url, [index])
Adds an external style sheet specification to a styleSheet object.

Returned Value

Integer of the index position within the styleSheets[] collection where the style sheet was added (in case you omit the second parameter and let the browser find the end position).

Parameters

url

A complete or relative URL to the style sheet (.css) file.

index

An optional integer indicating where in the collection the new element should be placed.

addRule( ) NN n/a IE 4 DOM n/a
addRule("selector", "style"[, index])
Adds a new rule for a style sheet. This method offers a scripted way of adding a rule to an existing styleSheet object:
document.styleSheets[1].addRule("p b","color:red");
You may duplicate a selector that already exists in the styleSheet and, therefore, override an existing rule for the same element selector. The only prohibition is that you may not override a rule to convert a plain style rule into one that creates a positionable element (or vice versa). The new rule is governed by the same cascading rules as all style sheet rules (that includes the rule's source code position among other rules with the same selector). Therefore, a new rule in a styleSheet object does not supersede a style set in an element's style property.

Returned Value

Early versions of IE returned no value. More recently, IE for Windows returns -1, while IE for Macintosh returns null. In the future, the returned value may become the integer of the index location of the new rule.

Parameters

selector

The style rule selector as a string.

style

One or more style attribute:value pairs. Multiple pairs are semicolon delimited, just as they are in the regular style sheet definition.

index

An optional integer indicating where in the collection the new element should be placed.

deleteRule( ) NN 6 IE 5(Mac) DOM 2
deleteRule(index)
Removes a rule from the styleSheet object. The integer index parameter value points to the zero-based item in the cssRules array to delete. Note that IE 5 for Macintosh implements both the Microsoft removeRule( ) and W3C DOM deleteRule( ) method for the same operation.

Returned Value

None.

Parameters

index

A zero-based integer indicating which rule in the cssRules collection is to be deleted.

insertRule( ) NN 6 IE 5(Mac) DOM 2
insertRule("ruleText", index)
Adds a new rule for a style sheet. This method offers a scripted way of adding a rule to an existing W3C DOM styleSheet object:
document.styleSheets[1].insertRule("p b {color:red}", 0);
You may duplicate a selector that already exists in the styleSheet and, therefore, override an existing rule for the same element selector. The only prohibition is that you may not override a rule to convert a plain style rule into one that creates a positionable element (or vice versa). The new rule is governed by the same cascading rules as all style sheet rules (that includes the rule's source code position among other rules with the same selector). Therefore, a new rule in a styleSheet object does not supersede a style set in an element's style property. Note that IE 5 for the Macintosh implements both the W3C DOM insertRule( ) and Microsoft addRule( ) methods to accomplish the same result.

Returned Value

Integer of the index location of the new rule.

Parameters

ruleText

The entire style rule selector as a string in exactly the same format as assigned in a style element: selector {attribute:value; attribute:value;...}.

index

Zero-based integer indicating where in the cssRules collection the new rule should be placed.

removeRule( ) NN n/a IE 4 DOM n/a
removeRule(index)
Removes a rule from the styleSheet object. The integer index parameter value points to the zero-based item in the rules array to delete.

Returned Value

None.

Parameters

index

A zero-based integer indicating which rule in the rules collection is to be deleted.

styleSheets, StyleSheetList NN 6 IE 4 DOM 2

A collection of styleSheet objects that are members of a document object. The W3C DOM abstract representation of this collection is called a StyleSheetList object. Members of this collection are accessed via their integer index number, but you may iterate through the collection and examine properties of each style sheet object (such as the selectorText property) to distinguish one rule from another.

Object Model Reference

document.styleSheets

Object-Specific Properties

length

Object-Specific Methods

item( )

Object-Specific Event Handler Properties

None.

length NN 6 IE 4 DOM 2
Read-only
Returns the number of elements in the collection.

Example

var howMany = document.styleSheets.length;

Value

Integer.

item( ) NN 6 IE 4 DOM 2
item(index)
Returns a styleSheet object corresponding to the object matching the index value in source code order.

Returned Value

Reference to a styleSheet object. If there are no matches to the parameters, the returned value is null.

Parameters

index

A zero-based integer corresponding to the specified item in source code order (nested within the current document object).

table NN 6 IE 4 DOM 1

The table object reflects the table element. Other objects related to the table object are: caption, col, colgroup, tbody, td, tfoot, thead, and tr.

HTML Equivalent

<table>

Object Model Reference

[window.]document.getElementById("elementID")

Object-Specific Properties

`align`	`background`	`bgColor`	`border`
`borderColor`	`borderColorDark`	`borderColorLight`	`caption`
`cellPadding`	`cells`[]	`cellSpacing`	`cols`
`dataPageSize`	`frame`	`height`	`rows[]`
`rules`	`summary`	`tbodies[]`	`tFoot`
`tHead`	`width`

Object-Specific Methods

`createCaption( )`	`createTFoot( )`	`createTHead( )`	`deleteCaption( )`
`deleteRow( )`	`deleteTFoot( )`	`deleteTHead( )`	`insertRow( )`
`lastPage( )`	`moveRow( )`	`nextPage( )`	`previousPage( )`
`refresh( )`

Object-Specific Event Handler Properties

None.

align NN 6 IE 4 DOM 1
Read/Write
Defines the horizontal alignment of the element within its surrounding container.

Example

document.getElementById("myTable").align = "center";

Value

Any of the three horizontal alignment constants: center | left | right.

Default

left

background NN n/a IE 4 DOM n/a
Read/Write
Provides the URL of the background image for the table. If you set a backgroundColor to the element as well, the color appears if the image fails to load; otherwise, the image overlays the color.

Example

document.getElementById("myTable").background = "images/watermark.jpg";

Value

Complete or relative URL to the background image file.

Default

None.

bgColor NN 6 IE 4 DOM 1
Read/Write
Specifies the background color of the element. This color setting is not reflected in the style sheet backgroundColor property. Even if the bgcolor attribute or bgColor property is set with a plain-language color name, the returned value is always a hexadecimal triplet.

Example

document.getElementById("myTable").bgColor = "yellow";

Value

A hexadecimal triplet or plain-language color name. See Appendix A for acceptable plain-language color names.

Default

Varies with browser and operating system.

border NN 6 IE 4 DOM 1
Read/Write
Specifies the thickness of the border around the table (in pixels). This is the default 3-D-look border and should not be confused with borders created with style sheets.

Example

document.getElementById("myTable").border = 4;

Value

An integer value. A setting of zero removes the border entirely.

Default

0

borderColor NN n/a IE 4 DOM n/a
Read/Write
Specifies the color of the table's border. Internet Explorer applies the color to all four lines that make up the interior border of a cell. Therefore, colors of adjacent cells do not collide.

Example

document.getElementById("myTable").borderColor = "salmon";

Value

A hexadecimal triplet or plain-language color name. A setting of empty is interpreted as "#000000" (black). See Appendix A for acceptable plain-language color names.

Default

Varies with operating system.

borderColorDark, borderColorLight NN n/a IE 4 DOM n/a
Read/Write
The 3-D effect of table borders in Internet Explorer is created by careful positioning of light and dark lines around the page's background or default color. You can independently control the colors used for the dark and light lines by assigning values to the borderColorDark (left and top edges of the cell) and borderColorLight (right and bottom edges) properties.
Typically, you should assign complementary colors to the pair of properties. There is also no rule that says you must assign a dark color to borderColorDark. The attributes merely control a well-defined set of lines so you can predict which lines of the border change with each attribute.

Example

document.getElementById("myTable").borderColorDark = "blue"; document.getElementById("myTable").borderColorLight = "cornflowerblue";

Value

A hexadecimal triplet or plain-language color name. A setting of empty is interpreted as "#000000" (black). See Appendix A for acceptable plain-language color names.

Default

Varies with operating system.

caption NN 6 IE 4(Win)/5(Mac) DOM 1
Read-only
Returns a reference to a caption element nested inside the table. From this reference you can access properties and methods of the caption object. In Netscape 6, you can create a new caption element, and assign that new element's reference to the caption property of a table, making the property read/write in that browser (although you really should be using the createCaption( ) method). For all browsers, however, you can modify properties of the caption object returned by the caption property.

Example

var capText = document.getElementById("myTable").caption.innerHTML;

Value

Object reference.

Default

None.

cellPadding NN 6 IE 4 DOM 1
Read/Write
Specifies the amount of empty space between the (visible or invisible) border of a table cell and the content of the cell. Note that this property applies to space inside a cell. Minor adjustments to this property are not as noticeable when the table does not also display borders (in which case the cellSpacing property can assist in adjusting the space between cells).

Example

document.getElementById("myTable").cellPadding = "15";

Value

A string value for a length in pixels or percentage.

Default

0

cells NN n/a IE 5(Win) DOM n/a
Read-only
Returns a collection of all td elements inside the table. Entries in the array are in source code order of td elements. This property is more widely available for a tr element (one row at a time).

Example

var totCells = document.getElementById("myTable").cells.length;

Value

Reference to a cells collection object.

Default

Array of zero length.

cellSpacing NN 6 IE 4 DOM 1
Read/Write
Specifies the amount of empty space between the outer edges of each table cell. If the table has a border, the effect of setting cellSpacing is to define the thickness of borders rendered between cells. Even without a visible border, the readability of a table often benefits from cell spacing, or a combination of cell spacing and cell padding.

Example

document.getElementById("myTable").cellSpacing = "5";

Value

A string value for a length in pixels or percentage.

Default

0 (with no table border); 2 (with table border).

cols NN n/a IE 4 DOM 1
Read/Write
Specifies the number of columns of the table. The corresponding IE-specific cols attribute assists the browser in preparation for rendering the table. Without this attribute, the browser relies on its interpretation of all downloaded tr and td elements to determine how the table is to be divided. You cannot change the column makeup of a table from this property, despite its read/write status. See also the col object earlier in this chapter

Example

document.getElementById("myTable").cols = 5;

Value

Integer.

Default

None.

dataPageSize NN n/a IE 4 DOM n/a
Read/Write
Used with IE data binding, this property advises the browser how many instances of a table row must be rendered to accommodate the number of data source records set by this attribute. See lastPage( ), nextPage( ), and previousPage( ) methods for navigating through groups of records.

Example

document.getElementById("inventoryTable").dataPageSize = 10;

Value

Integer.

Default

None.

frame NN 6 IE 4 DOM 1
Read/Write
Indicates which (if any) sides of a table's outer border (set with the border attribute or border property) are rendered. This property does not affect the interior borders between cells.

Example

document.getElementById("orderForm").frame = "hsides";

Value

Any one case-insensitive frame constant (as a string):

above

Renders border along top edge of table only

below

Renders border along bottom edge of table only

border

Renders all four sides of the border (same as box)

box

Renders all four sides of the border (same as border)

hsides

Renders borders on top and bottom edges of table only (a nice look)

lhs

Renders border on left edge of table only

rhs

Renders border on right edge of table only

void

Hides all borders (default in HTML 4)

vsides

Renders borders on left and right edges of table only

Default

void (when border=0); border (when border is any other value)

height, width NN 6 (width only) IE 4 DOM 1 (width only)
Read/Write
Specify the height and width in pixels of the element. Changes to these values are immediately reflected in reflowed content on the page. Only the width property is available in Netscape 6 (and the W3C DOM), as the table's height is considered to be the sum of the highest cell in each row.

Example

document.getElementById("myTable").height = 250;

Value

Integer.

Default

None.

rows NN 6 IE 4 DOM 1
Read-only
Returns a collection of tr elements inside the entire table. You can also get a group of rows for each table section (tbody, tfoot, and thead element objects).

Example

var allTableRows = document.getElementById("myTable").rows;

Value

Reference to a rows collection object.

Default

Array of zero length.

rules NN 6 IE 4 DOM 1
Read/Write
Indicates where (if at all) interior borders between cells are rendered by the browser. In addition to setting the table to draw borders to turn the cells into a matrix, you can set borders to be drawn only to separate borders, columns, or any sanctioned cell grouping (thead, tbody, tfoot, colgroup, or col). The border attribute must be present—either as a Boolean or set to a specific border size—for any cell borders to be drawn. Do not confuse this property with the rules[] collection of styleSheet objects. Scripted changes to this property do not always yield the desired results, especially in early versions of Netscape 6.

Example

document.getElementById("myTable").rules = "groups";

Value

Any one case-insensitive rules constant (as a string):

all

Renders borders around each cell

cols

Renders borders between columns only

groups

Renders borders between cell groups as defined by thead, tfoot, tbody, colgroup, or col elements

none

Hides all interior borders

rows

Renders borders between rows only

Default

none (when border=0); all (when border is any other value).

summary NN 6 IE 6 DOM 1
Read-only
Reflects the HTML 4 summary attribute, which provides no particular functionality in mainstream browsers. But you can assign a value to it in the source code to convey data to a script that reads the property.

Example

var data = document.getElementById("myTable").summary;

Value

String.

Default

Empty string.

tBodies[ ] NN 6 IE 4(Win)/5(Mac) DOM 1
Read-only
Returns a collection of tBody objects in the current table. Every table element has at least one (explicit or implied) tBody object nested inside.

Example

var bodSections = document.getElementById("myTable").tBodies;

Value

Reference to a collection of tBody objects.

Default

Array of length one.

tFoot NN 6 IE 4(Win)/5(Mac) DOM 1
Read-only
Returns a reference to the tfoot element object if one has been defined for the table. If no tfoot element exists, the value is null. You can access tfoot element object properties and methods through this reference if you like. This property is available only on the Win32 version of Internet Explorer 4.

Example

var tableFootTxt = document.getElementById("myTable").tFoot.firstChild.nodeValue;

Value

tfoot element object reference.

Default

null

tHead NN 6 IE 4(Win)/5(Mac) DOM 1
Read-only
Returns a reference to the thead element object if one has been defined for the table. If no thead element exists, the value is null. You can access thead element object properties and methods through this reference if you like. This property is available only on the Win32 version of Internet Explorer 4.

Example

var tableHeadTxt = document.getElementById("myTable").tHead.firstChild.nodevalue;

Value

thead element object reference.

Default

null

width
See height.

createCaption( ), deleteCaption( ) NN 6 IE 4 DOM 1
Add or remove a caption element nested within the current table element. If no caption exists, the creation method produces an empty element, which your scripts must then populate with caption text (through common element content modification techniques). If a caption exists, the method is essentially ignored, and returns a reference to the existing caption element.

Returned Value

Reference to new caption element (for createCaption( )); nothing for deleteCaption( ).

Parameters

None.

createTFoot( ), createTHead( ), deleteTFoot( ), deleteTHead( ) NN 6 IE 4 DOM 1
Add or remove a thead or tfoot element nested within the current table element. If no head or foot table section exists, the creation method produces an empty element, which your scripts must then populate with rows (through thead.insertRow( ) and tfoot.insertRow( ) methods). If the desired table section exists, the method is essentially ignored, and returns a reference to the existing thead or tfoot element.

Returned Value

Reference to newly created element (for createTFoot( ) and createTHead( )); Nothing for deleteTHead( ) and deleteTFoot( ).

Parameters

None.

deleteRow( ) NN 6 IE 4 DOM 1
deleteRow(index)
Removes a tr element nested within the current table element. The integer parameter points to the zero-based item in the rows collection. To repopulate a table with new or sorted content, empty the table (or just a table section) with iterative calls to the deleteRow( ) method:
while (tableReference.rows.length > 0) { tableReference.deleteRow(0); }

Returned Value

None.

Parameters

index

Zero-based integer corresponding to the said numbered tr element in source code order (nested within the current element).

insertRow( ) NN 6 IE 4(Win) DOM 1
insertRow(index)
Inserts a tr element nested within the current table element. The integer parameter points to the zero-based index in the rows collection where the new row should go, but in IE you can also use the shortcut value of -1 to append the row to the end of the collection. Adding the row inserts an empty element, to which you add cells via the insertCell( ) method. Unfortunately, scripting the addition of table rows and cells in IE for the Macintosh (including Version 5.1) is very broken, yielding elephantine row and cell dimensions. For nonnested tables, you might be able to get away with regular document tree node creation and insertion instead of the table (and related) object convenience methods.

Returned Value

Reference to the newly inserted row.

Parameters

index

Zero-based integer corresponding to a row of the rows collection before which the new row is to be inserted.

lastPage( ), nextPage( ), previousPage( ) NN n/a IE 4/5 DOM n/a
Advises the data binding facilities to load the last, next, or previous group of records from the data source to fill the number of records established with the dataPageSize property. The lastPage( ) method is available in IE 5 or later.

Returned Value

None.

Parameters

None.

moveRow( ) NN n/a IE 5(Win) DOM n/a
moveRow(indexToMove, destinationIndex)
Moves a row in the table from its original location to a different row position. The first parameter is a zero-based index of the row (within the rows collection) you wish to move. The second parameter is the index of the row before which you want to move the row. As a method of the table object, moveRow( )'s index parameters include the first row, which may contain th elements you don't want to move. Invoke the method on the tbody object if you want counting to be just within a table section.

Returned Value

Reference to the moved row.

Parameters

indexToMove

A zero-based integer pointing to the row to move.

destinationIndex

A zero-based integer pointing to the row above which the row is to be moved.

refresh( ) NN n/a IE 4 DOM n/a
Advises the data binding facilities to reload the current page of data from the data source. If your table is retrieving frequently-changing data from a database, you can create a setTimeout( ) loop to invoke document.getElementById("myTable").refresh( ) as often as users would want updated information from the database.

Returned Value

None.

Parameters

None.

tags NN |4| IE n/a DOM n/a

The tags object is used by JavaScript syntax for style sheets in Navigator 4 only. As a property of the document object, this tags object is used in building references to particular HTML elements to get or set their style-related properties. The direct properties of the tags object are all HTML element types. For example:

[document.]tags.p
[document.]tags.h1

There is no need to repeat a list of all HTML elements as properties for this object. These references are usable inside style elements with a type set to text/javascript. That's where you assign values to style sheet properties with JavaScript syntax, as in the following examples:

tags.p.color = "green";
tags.h1.fontSize = "14pt";

The properties in the following list are not properties of the tags object per se, but rather of the style sheet associated with an element, class, or ID singled out by a JavaScript syntax assignment statement. The properties are listed here for convenience (and historical completeness). Properties dedicated to element positioning are listed separately from regular style properties. For information about these property values, consult the CSS reference chapter, where you can find details of all style sheet properties listed by CSS syntax.

Style Object-Specific Properties

`backgroundColor`	`backgroundImage`	`borderBottomWidth`	`borderColor`
`borderLeftWidth`	`borderRightWidth`	`borderStyle`	`borderTopWidth`
`borderWidths( )`	`color`	`display`	`fontFamily`
`fontSize`	`fontStyle`	`fontWeight`	`listStyleType`
`marginBottom`	`marginLeft`	`marginRight`	`margins( )`
`marginTop`	`paddingBottom`	`paddingLeft`	`paddingRight`
`paddings`	`paddingTop`	`textAlign`	`textDecoration`
`textTransform`	`verticalAlign`	`whiteSpace`

Position Object-Specific Properties

`background`	`bgColor`	`clip`	`left`
`top`	`visibility`	`zIndex`

tBodies NN 6 IE 4 DOM 1

This is a collection of all tbody elements contained within a single table element. Collection members are sorted in source code order.

Object Model Reference

document.getElementById("tableID").tBodies

Object-Specific Properties

length

Object-Specific Methods

item( )

namedItem( )

tags( )

urns( )

Object-Specific Event Handler Properties

None.

length NN 6 IE 4 DOM 1
Read-only
Returns the number of elements in the collection.

Example

var howMany = document.getElementById("myTable").tBodies.length;

Value

Integer.

item( ) NN 6 IE 4 DOM 1
item(index[, subindex]) item(index)
Returns a single tBody object or collection of tBody objects corresponding to the element matching the index value (or, optionally in IE, the index and subindex values).

Returned Value

One tBody object or collection (array) of tBody objects. If there are no matches to the parameters, the returned value is null.

Parameters

index

When the parameter is a zero-based integer, the returned value is a single element corresponding to the specified item in source code order (nested within the current element); when the parameter is a string (IE only), the returned value is a collection of elements with id properties that match that string.

subindex

In IE only, if you specify a string value for the first parameter, you can use the second parameter to specify a zero-based index that retrieves the specified element from the collection with id properties that match the first parameter's string value.

namedItem( ) NN 6 IE 6 DOM 1
namedItem("ID")
Returns a single tBody object or collection of tBody objects corresponding to the element matching the parameter string value.

Returned Value

One tBody object or collection (array) of tBody objects. If there are no matches to the parameters, the returned value is null.

Parameters

ID

The string that contains the same value as the desired element's id attribute.

tags( ) NN n/a IE 4 DOM n/a
tags("tagName")
Returns a collection of objects (among all objects nested within the current collection) whose tags match the tagName parameter.

urns( ) NN n/a IE 5(Win) DOM n/a
urns(URN)
See the all.urns( ) method.

tbody, tfoot, thead NN 6 IE 4 DOM 1

The tbody, tfoot, and thead objects reflect the tbody, tfoot, and thead elements, respectively. For scripting purposes, you can treat each of these as a container of row groups inside a table. They all share the same properties and methods, so you need to keep their HTML functionality straight as you script these elements. A table can have only one tfoot and one thead element, but multiple tbody elements. Also, by default, Internet Explorer 4 or later and Netscape 6 create a tbody object for every table even if you don't include one in your table's source code. This default tbody element encompasses all rows of the table (except those you have wrapped inside thead or tfoot elements, if any). Although these objects are implemented in IE 4 for the Macintosh, they are incomplete. Moreover, the row insertion operations noted in the table element are just as strange for these objects under IE 4 for the Mac.

HTML Equivalent

<tbody>
<tfoot>
<thead>

Object Model Reference

[window.]document.getElementById("elementID")
[window.]document.getElementById("tableID").tBodies[i]
[window.]document.getElementById("tableID").tfoot
[window.]document.getElementById("tableID").thead

Object-Specific Properties

align

bgColor

ch

chOff

rows

vAlign

Object-Specific Methods

deleteRow( )

insertRow( )

moveRow( )

Object-Specific Event Handler Properties

None.

align NN 6 IE 4 DOM 1
Read/Write
Defines the horizontal alignment of content within all cells contained by the tbody element.

Example

document.getElementById("myTbody").align = "center";

Value

One of the three horizontal alignment string constants: center | left | right.

Default

left

bgColor NN 6 IE 4 DOM n/a
Read/Write
Specifies the background color of the cells contained by the tbody, tfoot, or thead element. This color setting is not reflected in the style sheet backgroundColor property. Even if the bgcolor attribute or bgColor property is set with a plain-language color name, the returned value is always a hexadecimal triplet.

Example

document.getElementById("myTable").tHead.bgColor = "yellow";

Value

A hexadecimal triplet or plain-language color name. See Appendix A for acceptable plain-language color names.

Default

Varies with browser and operating system.

ch NN 6 IE 5(Mac)/6(Win) DOM 1
Read/Write
Defines the text character used as an alignment point for text within a column or column group (reflecting the char attribute). This property is normally of value only for the align attribute set to "char". In practice, neither IE nor Navigator responds to these properties.

Example

document.getElementById("myTBody").ch = ".";

Value

Single character string.

Default

None.

chOff NN 6 IE 5(Mac)/6(Win) DOM 1
Read/Write
Defines the offset point at which the character specified by the char attribute is to appear within a cell. In practice, neither IE nor Navigator responds to these properties.

Example

document.getElementById("myTBody").chOff = "80%";

Value

String value of the number of pixels or percentage (within the cell).

Default

None.

rows NN 6 IE 4 DOM 1
Read-only
Returns a collection of tr elements inside the table section. You can also get a group of rows for an entire table in IE for Windows.

Example

var allTableRows = document.getElementById("myTFoot").rows;

Value

Reference to a rows collection object.

Default

Array of zero length.

vAlign NN 6 IE 4 DOM 1
Read/Write
Specifies the manner of vertical alignment of text within the cells contained by the tbody, tfoot, or thead element.

Example

document.getElementById("myTbody").vAlign = "baseline";

Value

Case-insensitive constant (as a string): baseline | bottom | middle | top.

Default

middle

deleteRow( ) NN 6 IE 4 DOM 1
deleteRow(index)
Removes a tr element nested within the current tbody, tfoot, or thead element. The integer parameter points to the zero-based item in the section's rows collection. To repopulate a table section with new or sorted content, empty the section with iterative calls to the deleteRow( ) method:
while (tBodyReference.rows.length > 0) { tBodyReference.deleteRow(0); }

Returned Value

None.

Parameters

index

Zero-based integer corresponding to the said numbered tr element in source code order (nested within the current element).

insertRow( ) NN 6 IE 4(Win) DOM 1
insertRow(index)
Inserts a tr element nested within the current tbody, tfoot, or thead element. The integer parameter points to the zero-based index in the rows collection where the new row should go, but in IE you can also use the shortcut value of -1 to append the row to the end of the collection. Adding the row inserts an empty element, to which you add cells via the insertCell( ) method. Unfortunately, scripting the addition of table rows and cells in IE for the Macintosh (including Version 5.1) is very broken, yielding elephantine row and cell dimensions. For nonnested tables, you might be able to get away with regular document tree node creation and insertion instead of the table section object convenience methods.

Returned Value

Reference to the newly inserted row.

Parameters

index

Zero-based integer corresponding to a row of the rows collection before which the new row is to be inserted.

moveRow( ) NN n/a IE 5(Win) DOM n/a
moveRow(indexToMove, destinationIndex)
Moves a row in the tbody, tfoot, or thead element from its original location to a different row position within the same section. The first parameter is a zero-based index of the row (within the rows collection) you wish to move. The second parameter is the index of the row before which you want to move the row.

Returned Value

Reference to the moved row.

Parameters

indexToMove

A zero-based integer pointing to the row to move.

destinationIndex

A zero-based integer pointing to the row above which the row is to be moved.

td, th NN 6 IE 4 DOM 1

The td and th objects reflect the td and th elements. From an HTML structure viewpoint, the two elements have different purposes within a table; but from a scripting perspective, the elements share the same properties and methods. A cell is a cell.

While a table cell element may inherit a number of visual properties from containers (e.g., a td element appearing to pick up the bgColor of a tbody or tr element), those inherited property values are not automatically assigned to the td object. Therefore, just because a cell may have a yellow background color doesn't mean its bgColor property is set at all. Due to incomplete implementation, IE 4 for the Macintosh does not offer complete scripted access to these element objects.

HTML Equivalent

<td>
<th>

Object Model Reference

[window.]document.getElementById("elementID")
[window.]document.getElementById("tableRowID").cells[i]

Object-Specific Properties

`abbr`	`align`	`axis`	`background`
`bgColor`	`borderColor`	`borderColorDark`	`borderColorLight`
`cellIndex`	`ch`	`chOff`	`colSpan`
`headers`	`height`	`noWrap`	`rowSpan`
`scope`	`vAlign`	`width`

Object-Specific Methods

None.

Object-Specific Event Handler Properties

None.

abbr NN 6 IE 5(Mac)/6(Win) DOM 1
Read/Write
Reflects the abbr attribute (cell description for speech), for which mainstream browsers have no functionality at this time.

Value

String.

Default

Empty string.

align NN 6 IE 4 DOM 1
Read/Write
Defines the horizontal alignment of content within the cell.

Example

document.getElementById("myTD").align = "center";

Value

Any of the three horizontal alignment constants: center | left | right.

Default

left

axis NN 6 IE 5(Mac)/6(Win) DOM 1
Read/Write
Reflects the axis attribute (cell category description for speech), for which mainstream browsers have no functionality at this time.

Value

String.

Default

Empty string.

background NN n/a IE 4 DOM n/a
Read/Write
Specifies the URL of the background image for the cell. If you set a bgColor to the element as well, the color appears if the image fails to load; otherwise, the image overlays the color.

Example

document.getElementById("myTD").background = "images/watermark.jpg";

Value

Complete or relative URL to the background image file.

Default

None.

bgColor NN 6 IE 4 DOM 1
Read/Write
Provides the background color of the table cell. This color setting is not reflected in the style sheet backgroundColor property. Even if the bgcolor attribute or bgColor property is set with a plain-language color name, the returned value is always a hexadecimal triplet.

Example

document.getElementById("myTD").bgColor = "yellow";

Value

A hexadecimal triplet or plain-language color name. See Appendix A for acceptable plain-language color names.

Default

Varies with browser and operating system.

borderColor NN n/a IE 4 DOM n/a
Read/Write
Provides the color of the element's border. Internet Explorer applies the color to all four lines that make up the interior border of a cell. Therefore, colors of adjacent cells do not collide.

Example

document.getElementById("myTD").borderColor = "salmon";

Value

A hexadecimal triplet or plain-language color name. A setting of empty is interpreted as "#000000" (black). See Appendix A for acceptable plain-language color names.

Default

Varies with operating system.

borderColorDark, borderColorLight NN n/a IE 4 DOM n/a
Read/Write
The 3-D effect of table borders in Internet Explorer is created by careful positioning of light and dark lines around the page's background or default color. You can independently control the colors used for the dark and light lines by assigning values to the borderColorDark (left and top edges of the cell) and borderColorLight (right and bottom edges) properties.
Typically, you should assign complementary colors to the pair of properties. There is also no rule that says you must assign a dark color to borderColorDark. The attributes merely control a well-defined set of lines so you can predict which lines of the border change with each attribute.

Example

document.getElementById("myTD").borderColorDark = "blue"; document.getElementById("myTD").borderColorLight = "cornflowerblue";

Value

A hexadecimal triplet or plain-language color name. A setting of empty is interpreted as "#000000" (black). See Appendix A for acceptable plain-language color names.

Default

Varies with operating system.

cellIndex NN 6 IE 4 DOM 1
Read-only
Returns a zero-based integer representing the position of the current cell among all other td elements in the same row. The count is based on the source code order of the td elements within a tr element. This property is not available in the Macintosh version of Internet Explorer 4.

Example

var whichCell = document.getElementById("myTD").cellIndex;

Value

Integer.

Default

None.

ch NN 6 IE 5(Mac)/6(Win) DOM 1
Read/Write
Defines the text character used as an alignment point for text within a cell. This property is normally of value only for the align attribute set to "char". In practice, neither IE nor Navigator responds to these properties.

Example

document.getElementById("myTD").ch = ".";

Value

Single character string.

Default

None.

chOff NN 6 IE 5(Mac)/6(Win) DOM 1
Read/Write
Defines the offset point at which the character specified by the char attribute is to appear within a cell. In practice, neither IE nor Navigator responds to these properties.

Example

document.getElementById("myTD").chOff = "80%";

Value

String value of the number of pixels or percentage (within the cell).

Default

None.

colSpan NN 6 IE 4 DOM 1
Read/Write
Specifies the number of columns across which the current table cell should extend itself. For each additional column included in the colSpan count, one less td element is required for the table row. If you set the align property to center or right, the alignment is calculated on the full width of the td element across the specified number of columns. Unless the current cell also specifies a rowspan attribute, the next table row returns to the original column count.

Example

document.getElementById("myTD").colSpan = 2;

Value

Integer, usually 2 or larger.

Default

1

headers NN 6 IE 5(Mac)/6(Win) DOM 1
Read/Write
Points to the ID of a table cell element designated as a column header for the current cell. In practice, no mainstream browsers provide functionality for this property.

Value

String ID value.

Default

None.

height, width NN 6 IE 4 DOM 1
Read/Write
Specify the height and width of the element. Changes to these values are immediately reflected in reflowed content on the page. These properties are read-only in the Macintosh version of Internet Explorer 4.

Example

document.getElementById("myTD").height = "250";

Value

Pixel integer count (as a string) or a percentage.

Default

None.

noWrap NN 6 IE 4 DOM 1
Read/Write
Indicates whether the browser should render the cell as wide as is necessary to display a line of nonbreaking text on one line. Abuse of this attribute can force the user into a great deal of inconvenient horizontal scrolling of the page to view all of the content.

Example

document.getElementById("myTD").noWrap = "true";

Value

Boolean value: true | false.

Default

false

rowSpan NN 6 IE 4 DOM 1
Read/Write
Specifies the number of rows through which the current table cell should extend itself downward. For each additional row included in the rowSpan count, one less td element is required for the next table row. If you set the vAlign property to middle, the alignment is calculated on the full height of the td element across the specified number of rows.

Example

document.getElementById("myTD").rowSpan = 12;

Value

Integer, usually 2 or larger.

Default

1

scope NN 6 IE 5(Mac)/6(Win) DOM 1
Read/Write
Reflects the scope attribute of table cell elements. In practice, no mainstream browsers provide functionality for this property.

Value

One of the recognized string constants: cols | colgroup | rows | rowgroup.

Default

None.

vAlign NN 6 IE 4 DOM 1
Read/Write
Specifies the manner of vertical alignment of text within the element's content box.

Example

document.getElementById("myTD").vAlign = "baseline";

Value

Case-insensitive constant (as a string): baseline | bottom | middle | top.

Default

middle

width
See height.

Text, TextNode NN 6 IE 5 DOM 1

A Text object is what this book calls in many places a "text node." Microsoft refers to this object as a TextNode object. This object represents the child object containing the characters that go between start and end tags of an element. The Text object exists in the abstract W3C DOM model by virtue of an inheritance chain between it and the fundamental Node object (Node to CharacterData to Text). The Node object ancestry automatically equips the Text object with a long list of properties and methods described among the shared items at the start of this chapter (the properties include: attributes, childNodes, firstChild, lastChild, localName, namespaceURI, nextSibling, nodeName, nodeType, nodeValue, ownerDocument, parentNode, prefix, previousSibling; the methods are: appendChild( ), cloneNode( ), hasAttributes( ), hasChildNodes( ), insertBefore( ), isSupported( ), normalize( ), removeChild( ), replaceChild( )). Along this inheritance chain, the Text object gains some additional properties and methods (described below) that let us manipulate the node's content within the constructs dictated by the formal W3C DOM model. Because the DOM is scripting language-independent, you find properties and methods that may be more easily or more powerfully manipulated through JavaScript string handling (see Chapter 12). Feel free to use those techniques in a client-side JavaScript environment of the browser.

Scripts refer to the Text node (or IE TextNode object) only through references that locate the node in the document tree (such as the first child of a particular element node) or as returned by the document.createTextNode( ) method.

Object Model Reference

elementReference.childReference
textNodeReference.siblingReference

Object-Specific Properties

data

length

Object-Specific Methods

`appendData( )`	`deleteData( )`	`insertData( )`	`replaceData( )`
`splitText( )`	`substringData( )`

Object-Specific Event Handler Properties

None.

data NN 6 IE 5 DOM 1
Read/Write
Contains the string of characters in the text node. The value is the same as the nodeValue property value, and there is no reason to favor one property over the other, except perhaps for plain-language syntactic preferences for reading the code.

Example

document.getElementById("myP").firstSibling.data = "Some new text.";

Value

String.

Default

Empty string.

length NN 6 IE 5 DOM 1
Read-only
Provides a count of characters in the text node.

Example

var howMany = document.getElementById("myP").firstSibling.length;

Value

Integer.

Default

0

appendData( ) NN 6 IE 5(Mac)/6(Win) DOM 1
appendData("newText")
Adds characters (passed as a string parameter) to the end of the current text node. The content consists of raw characters, so if you intend to add a sentence to a text node, your scripts are responsible for sentence spacing.

Returned Value

None.

Parameters

newText

String value of text to be appended. A reference that evaluates to a string (such as the data property of another text node in the document) copies the referenced value to the append location.

deleteData( ) NN 6 IE 5(Mac)/6(Win) DOM 1
deleteData(startOffset, count)
Removes characters from the current text node starting with the character in (zero-based) position signified by startOffset, and for a length of count characters in the normal text direction of the current language. If the length specified for deletion goes beyond the length of the data, all characters to the end of the text node are deleted without throwing an exception. Note that Netscape 6 includes source code white space in its counts for both parameters.

Returned Value

None.

Parameters

startOffset

Positive integer specifying the zero-based starting character point for the deletion.

count

Positive integer specifying the number of characters to be deleted.

insertData( ) NN 6 IE 5(Mac)/6(Win) DOM 1
insertData(startOffset, "newText")
Inserts text into a zero-based character position in the text node.

Returned Value

None.

Parameters

startOffset

Positive integer specifying the zero-based character before which the new text is to be inserted.

newText

String value of text to be inserted. A reference that evaluates to a string (such as the data property of another text node in the document) copies the referenced value to the append location.

replaceData( ) NN 6 IE 5(Mac)/6(Win) DOM 1
replaceData(startOffset, count, "newText")
Replaces text in the current text node with new text. The original content to be removed is signified by the zero-based start position and the number of characters. The string passed as a third parameter goes into the space vacated by the removed text. A bug in IE 5 for Macintosh crops the new text to the length of the removed text.

Returned Value

None.

Parameters

startOffset

Positive integer specifying the zero-based starting character point for the deletion.

count

Positive integer specifying the number of characters to be deleted.

newText

String value of text to be inserted where the remaining text collapses. A reference that evaluates to a string (such as the data property of another text node in the document) copies the referenced value to the append location.

splitText( ) NN 6 IE 5(Mac)/6(Win) DOM 1
splitText(offset)
Divides the current text node into two sibling text nodes; otherwise, doesn't disturb the text.

Returned Value

Reference to the second text node.

Parameters

offset

Positive integer specifying the zero-based character point before which the split occurs.

substringData( ) NN 6 IE 5(Mac)/6(Win) DOM 1
substringData(startOffset, count)
Returns a copy of the designated segment of the text node content. The section to be copied is signified by the zero-based start position and the number of characters

Returned Value

String.

Parameters

startOffset

Positive integer specifying the zero-based starting character point for the copy action.

count

Positive integer specifying the number of characters to be copied.

textarea NN 2 IE 3 DOM 1

The textarea object reflects the textarea element and is used as a form control. This object is the primary way of getting a user to enter multiple lines of text for submission to the server. Note that the innerHTML property is not available on the Macintosh version of Internet Explorer 4. Only a limited number of properties and methods shown below are available in early browsers that do not support addressing all HTML elements (prior to IE 4 and Netscape 6). IE 5 and later support the shared doScroll( ) method for this object.

HTML Equivalent

<textarea>

Object Model Reference

[window.]document.formName.elementName
[window.]document.forms[i].elements[j]
[window.]document.getElementById("elementID")

Object-Specific Properties

`cols`	`dataFld`	`dataSrc`	`defaultValue`	`form`
`name`	`readOnly`	`rows`	`status`	`type`
`value`	`wrap`

Object-Specific Methods

createTextRange( )

handleEvent( )

select( )

Object-Specific Event Handler Properties

Handler	NN	IE	DOM
`onblur`	2	3	n/a
`onchange`	2	3	n/a
`onfocus`	2	3	n/a
`onkeydown`	4	4	n/a
`onkeypress`	4	4	n/a
`onkeyup`	4	4	n/a
`onscroll`	n/a	4	n/a
`onselect`	2	3	n/a

cols NN 6 IE 4 DOM 1
Read/Write
Specifies the width of the editable space of the textarea element. The value represents the number of monofont characters that are to be displayed within the width. When the font size can be influenced by style sheets, the actual width changes accordingly.

Example

document.forms[0].comments.cols = 60;

Value

Integer.

Default

Varies with browser and operating system.

dataFld NN n/a IE 4 DOM n/a
Read/Write
Used with IE data binding to associate a remote data source column name to a textarea object's value property. A datasrc attribute must also be set for the element. Setting both the dataFld and dataSrc properties to empty strings breaks the binding between element and data source. Works only with text file data sources in IE 5/Mac.

Example

document.myForm.myTextArea.dataFld = "description";

Value

Case-sensitive identifier of the data source column.

Default

None.

dataSrc NN n/a IE 4 DOM n/a
Read/Write
Used with IE data binding to specify the ID of the page's object element that loads the data source object for remote data access. Content from the data source is specified via the datafld attribute. Setting both the dataFld and dataSrc properties to empty strings breaks the binding between element and data source. Works only with text file data sources in IE 5/Mac.

Example

document.myForm.myTextArea.dataSrc = "DBSRC3";

Value

Case-sensitive identifier of the data source.

Default

None.

defaultValue NN 2 IE 3 DOM 1
Read-only
Specifies the default text for the textarea element, as established by the text between the start and end tags in the page's source code.

Example

var txtAObj = document.forms[0].myTextArea; if (txtAObj.value != txtAObj.defaultValue ) { ... }

Value

Any string value.

Default

None.

form NN 2 IE 3 DOM 1a
Read-only
Returns a reference to the form element that contains the current element. When processing an event from this element, the event handler function automatically has access to the select element (as the event object's target or srcElement property). By reading the form property, the script can easily access other controls within the same form.

Example

var theForm = evt.srcElement.form;

Value

form element object reference.

Default

None.

name NN 2 IE 3 DOM 1
Read/Write
This is the identifier associated with the form control. The value of this property is submitted as one-half of the name/value pair when the form is submitted to the server. Names are hidden from user view, since control labels are assigned via other means, depending on the control type. Form control names may also be used by script references to the objects. Despite the modern standards' preference for the id attribute, many browsers still require that a control be assigned a name attribute to allow the control's value to be submitted.

Example

document.orderForm.myTextArea.name = "customerComment";

Value

Case-sensitive identifier that follows the rules of identifier naming: it may contain no whitespace, cannot begin with a numeral, and should avoid punctuation except for the underscore character.

Default

None.

readOnly NN 6 IE 4 DOM 1
Read/Write
Indicates whether the form element can be edited on the page by the user. A form control that has its readOnly property set to true may still be modified by scripts, even though the user may not alter the content.

Example

document.forms[0].myTextArea.readOnly = "true";

Value

Boolean value: true | false.

Default

false

rows NN 6 IE 4 DOM 1
Read/Write
Specifies the height of the textarea element based on the number of lines of text that are to be displayed without scrolling. The value represents the number of monofont character lines that are to be displayed within the height before the scrollbar becomes active. When the font size can be influenced by style sheets, the actual height changes accordingly.

Example

document.forms[0].comments.rows = 6;

Value

Integer.

Default

2 (IE/Windows); 1 (IE/Macintosh); -1 (Netscape 6, meaning that the attribute or property hasn't been set).

status NN n/a IE 4 DOM n/a
Read/Write
This is implemented in IE, but has no function for the textarea object.

Value

Boolean value: true | false; or null.

Default

null

type NN 3 IE 4 DOM 1
Read-only
Returns the type of form control element. The value is returned in all lowercase letters. It may be necessary to cycle through all form elements in search of specific types to do some processing on (e.g., emptying all form controls of type "textarea" while leaving other controls untouched).

Example

if (document.forms[0].elements[3].type == "textarea") { ... }

Value

Any of the following constants (as a string): button | checkbox | file | hidden | image | password | radio | reset | select-multiple | select-one | submit | text | textarea.

Default

textarea

value NN 2 IE 3 DOM 1
Read/Write
Specifies the current value associated with the form control that is submitted with the name/value pair for the element. All values are strings.

Example

var comment = document.forms[0].myTextArea.value;

Value

String.

Default

None.

wrap NN n/a IE 4 DOM n/a
Read/Write
Indicates whether the browser should wrap text in a textarea element and whether wrapped text should be submitted to the server with soft returns converted to hard carriage returns. A value of hard engages word-wrapping and converts soft returns to CR-LF characters in the value submitted to the server. A value of soft turns on word-wrapping, but does not include the CR-LF characters in the text submitted with the form. A value of off turns word-wrapping off.

Example

document.forms[0].comments.wrap = "soft";

Value

One of the constant values (as a string): hard | off | soft.

Default

soft

createTextRange( ) NN n/a IE 4(Win) DOM n/a
Creates a TextRange object from the content of the textarea object. See the TextRange object for details.

Returned Value

TextRange object.

handleEvent( ) NN |4| IE n/a DOM n/a
handleEvent(event)
Instructs the object to accept and process the event whose specifications are passed as the parameter to the method. The object must have an event handler for the event type to process the event. Navigator 4 only.

Returned Value

None.

Parameters

event

A Navigator 4 event object.

select( ) NN 2 IE 3 DOM 1
Selects all the text displayed in the form element. To position the insertion pointer in a specific location inside a textarea element in IE, see the TextRange object.

Returned Value

None.

Parameters

None.

TextRange NN n/a IE 4(Win) DOM n/a

The TextRange object-- similar in concept to the Netscape 6 and W3C DOM Range object—represents the text of zero or more characters in a document. When a text range consists of zero characters, it represents an insertion point between two characters (or before the first or after the last character).

A TextRange object is created via the createTextRange( ) method associated with the body, button, text, or textarea objects. You can also turn a user selection into a range via the selection object's createRange( ) (note the slight difference in the method name). Once you have created a text range, use its methods to adjust its start and end points to encompass a desired segment of the text (such as text that matches a search string). Once the range has been narrowed to the target text, assign values to its htmlText and text properties to change, remove, or insert text. A library of direct commands that perform specific textual modifications can also be invoked to act on the text range. See Chapter 5 for details and examples of using the TextRange object.

Shared properties and methods from the list at the start of this chapter are: offsetLeft, offsetTop, getBoundingClientRect( ), getClientRects( ), and scrollIntoView( ). Note that the TextRange object and all associated facilities are available only in the Win32 version of Internet Explorer.

Object Model Reference

objectRef.createTextRange( )
selectionObjectRef.createRange( )

Object-Specific Properties

`boundingHeight`	`boundingLeft`	`boundingTop`	`boundingWidth`
`htmlText`	`text`

Object-Specific Methods

`collapse( )`	`compareEndPoints( )`	`duplicate( )`
`execCommand( )`	`expand( )`	`findText( )`
`getBookmark( )`	`inRange( )`	`isEqual( )`
`move( )`	`moveEnd( )`	`moveStart( )`
`moveToBookmark( )`	`moveToElementText( )`	`moveToPoint( )`
`parentElement( )`	`pasteHTML( )`	`queryCommandEnabled( )`
`queryCommandIndeterm( )`	`queryCommandState( )`	`queryCommandSupported( )`
`queryCommandText( )`	`queryCommandValue( )`	`select( )`
`setEndPoint( )`

boundingHeight, boundingWidth NN n/a IE 4(Win) DOM n/a
Read-only
Return the pixel measure of the imaginary space occupied by the TextRange object. Although you do not see a TextRange object in the document (unless a script selects it), the area of a TextRange object is identical to the area that a selection highlight would occupy. These values cinch up to measure only as wide or tall as the widest and tallest part of the range. You would arrive at these same values by performing arithmetic on values returned from the getBoundingClientRect( ) method.

Example

var rangeWidth = document.forms[0].myTextArea.createTextRange( ).boundingWidth;

Value

Integer.

Default

None.

boundingLeft, boundingTop NN n/a IE 4(Win) DOM n/a
Read-only
Return the pixel distance between the top or left of the browser window or frame and the top or left edges of the imaginary space occupied by the TextRange object. Although you do not see a TextRange object in the document (unless a script selects it), the area of a TextRange object is identical to the area that a selection highlight would occupy. Values for these properties are measured from the fixed window or frame edges and not the top and left of the document, which may scroll out of view. Therefore, as a document scrolls, these values change.

Example

var rangeOffH = document.forms[0].myTextArea.createTextRange( ).boundingLeft;

Value

Integer.

Default

None.

htmlText NN n/a IE 4(Win) DOM n/a
Read-only
Specifies all HTML of the document for a given element when that element is used as the basis for a TextRange object. For example, if you create a TextRange for the body element (document.body.createTextRange( )), the htmlText property contains all HTML content between (but not including) the body element tags.

Example

var rangeHTML = document.body.createTextRange( ).htmlText;

Value

String.

Default

None.

text NN n/a IE 4(Win) DOM n/a
Read/Write
Indicates the text contained by the text range. In the case of a TextRange object of a body element, this consists of only the text that is rendered, but none of the HTML tags behind the scenes.

Example

var rangeText = document.body.createTextRange( ).text;

Value

String.

Default

None.

collapse( ) NN n/a IE 4(Win) DOM n/a
collapse([start])
Reduces the TextRange object to a length of zero (creating an insertion point) at the beginning or end of the text range before it collapsed.

Returned Value

None.

Parameters

start

Optional Boolean value that controls whether the insertion point goes to the beginning (true) of the original range or the end (false). The default value is true.

compareEndPoints( ) NN n/a IE 4(Win) DOM n/a
compareEndPoints("type", comparisonRange)
Compares the relative position of the boundary (start and end) points of two ranges (the current range and one that had been previously saved to a variable). The first parameter defines which boundary points in each range you wish to compare. If the result of the comparison is that the first point is earlier in the range than the other point, the returned value is -1. If the result shows both points to be in the same location, the returned value is 0. If the result shows the first point to be later in the range than the other point, the returned value is 1. For example, if you have saved the first range to a variable r1 and created a new range as r2, you can see the physical relationship between the end of r2 and the start of r1:
r1.compareEndPoints("EndToStart", r2)
If r1 ends where r2 starts (the insertion point between two characters), the returned value is 0.

Returned Value

-1, 0, or 1.

Parameters

type

One of the following constants (as a string): StartToEnd | StartToStart | EndToStart | EndToEnd.

comparisonRange

A TextRange object created earlier and saved to a variable.

duplicate( ) NN n/a IE 4(Win) DOM n/a
Creates a new TextRange object with the same values as the current range. The new object is an independent object (the old and new do not equal each other), but their values are initially identical (until you start modifying one range or the other).

Returned Value

TextRange object.

Parameters

None.

execCommand( ) NN n/a IE 4(Win) DOM n/a
execCommand("commandName"[, UIFlag[, value]])
Executes the named command on the current TextRange object. Many commands work best when the TextRange object is an insertion point. See Appendix D for a list of commands.

Returned Value

Boolean value: true if command is successful; false if unsuccessful.

Parameters

commandName

A case-insensitive string value of the command name. See Appendix D.

UIFlag

Optional Boolean value: true to display any user interface triggered by the command (if any); false to prevent such display.

value

A parameter value for the command.

expand( ) NN n/a IE 4(Win) DOM n/a
expand("unit")
Expands the current text range (including a collapsed range) to encompass the textual unit passed as a parameter. For example, if someone selects some characters from a document, you can create the range and expand it to encompass the entire sentence in which the selection takes place:
var rng = document.selection.createRange( ); rng.expand("sentence");
If the starting range extends across multiple units, the expand( ) method expands the range outward to the next nearest unit.

Returned Value

Boolean value: true if method is successful; false if unsuccessful.

Parameters

unit

A case-insensitive string value of the desired unit: character | word | sentence | textedit. The textedit value expands the range to the entire original range.

findText( ) NN n/a IE 4(Win) DOM n/a
findText("string"[, searchScope][, flags])
Searches the current TextRange object for a match of a string passed as the required first parameter. By default, matching is done on a case-insensitive basis. If there is a match, the TextRange object repositions its start and end points to surround the found text. To continue searching in the document, you must reposition the start point of the text range to the end of the found string (with collapse( )).
Optional parameters let you limit the scope of the search within the range to a desired number of characters after the range's start point, or dictate additional matching requirements, such as partial or whole words.

Returned Value

Boolean value: true if a match is found; false if unsuccessful.

Parameters

string

A case-insensitive string to be searched.

searchScope

Integer for the number of characters to search relative to the range's start point. A positive number searches forward; a negative number searches backward, to text earlier in the document than the start point of the text range.

flags

Integer for search detail codes: 0 (match partial words); 1 (match backwards); 2 (match whole words only); 4 (match case).

getBookmark( ), moveToBookmark( ) NN n/a IE 4(Win) DOM n/a
getBookmark( ) moveToBookmark(bookmarkString)
These two methods work together as a way to temporarily save a text range specification and restore it when needed. The getBookmark( ) method returns an opaque string (containing binary data that is of no value to human users). Once that value is stored in a variable, the range can be modified as needed for the script. Some time later, the bookmarked text range can be restored with the moveToBookmark( ) method:
var rangeMark = myRange.getBookmark( ); ... myRange.moveToBookmark(rangeMark);

Returned Value

Boolean value: true if the operation is successful; false if unsuccessful.

Parameters

bookmarkString

An opaque string returned by the getBookmark( ) method.

inRange( ) NN n/a IE 4(Win) DOM n/a
inRange(comparisonRange)
Determines whether the comparison range is within or equal to the physical range of the current text range.

Returned Value

Boolean value: true if the comparison range is in or equal to the current range; false if not.

Parameters

comparisonRange

TextRange object created earlier and saved to a variable.

isEqual( ) NN n/a IE 4(Win) DOM n/a
isEqual(comparisonRange)
Determines whether the comparison range is identical to the current text range.

Returned Value

Boolean value: true if the comparison range is equal to the current range; false if not.

Parameters

comparisonRange

A TextRange object created earlier and saved to a variable.

move( ) NN n/a IE 4(Win) DOM n/a
move("unit"[, count])
Collapses the current text range to an insertion point at the end of the current range and moves it forward or backward from the current position by one or more units.

Returned Value

Integer of the number of units moved.

Parameters

unit

A case-insensitive string value of the desired unit: character | word | sentence | textedit. The textedit value moves the insertion pointer to the start or end of the entire original range.

count

An optional integer of the number of units to move the insertion pointer. Positive values move the pointer forward; negative values move the pointer backward. Default value is 1.

moveEnd( ), moveStart( ) NN n/a IE 4(Win) DOM n/a
moveEnd("unit"[, count]) moveStart("unit"[, count])
Moves only the end or start point (respectively) of the current text range by one or more units. An optional parameter lets you specify both the number of units and direction. To shift the start point of a text range toward the beginning of the original range, be sure to specify a negative value. When moving the end point forward by word units, be aware that a word ends with a whitespace character (including a period). Therefore, if a findText( ) method sets the range to a found string that does not end in a space, the first moveEnd("word") method moves the ending point to the spot past the space after the found string rather than to the following word.

Returned Value

Integer of the number of units moved.

Parameters

unit

A case-insensitive string value of the desired unit: character | word | sentence | textedit. The textedit value moves the insertion pointer to the start or end of the entire original range.

count

An optional integer of the number of units to move the insertion pointer. Positive values move the pointer forward; negative values move the pointer backward. Default value is 1.

moveToBookmark
See getBookmark( ).

moveToElementText( ) NN n/a IE 4(Win) DOM n/a
moveToElementText(elementObject)
Moves the current TextRange object's start and end points to encase the specified HTML element object. The resulting text range includes the HTML for the element, as well.

Returned Value

None.

Parameters

elementObject

A scripted reference to the object. This can be in the form of a direct reference (document.getElementById("elementID") or a variable containing the same kind of value.

moveToPoint( ) NN n/a IE 4(Win) DOM n/a
moveToPoint(x, y)
Collapses the text range to an insertion pointer and sets its location to the spot indicated by the horizontal and vertical coordinates in the browser window or frame. This is as if the user had clicked on a spot in the window to define an insertion point. Use methods such as expand( ) to enlarge the text range to include a character, word, sentence, or entire text range.

Returned Value

None.

Parameters

x

Horizontal coordinate of the insertion point in pixels relative to the left edge of the window or frame.

y

Vertical coordinate of the insertion point in pixels relative to the top edge of the window or frame.

parentElement( ) NN n/a IE 4(Win) DOM n/a
Returns an object reference to the next outermost element that fully contains the TextRange object.

Returned Value

Element object reference.

Parameters

None.

pasteHTML( ) NN n/a IE 4(Win) DOM n/a
pasteHTML("HTMLText")
Replaces the current text range with the HTML content supplied as a parameter string. Typically, this method is used on a zero-length text range object acting as an insertion pointer. All tags are rendered as if they were part of the original source code.

Returned Value

None.

Parameters

HTMLText

Document source code to be inserted into the document.

queryCommandEnabled( ) NN n/a IE 4(Win) DOM n/a
queryCommandEnabled("commandName")
Indicates whether the command can be invoked in light of the current state of the document or selection.

Returned Value

Boolean value: true if enabled; false if not.

Parameters

commandName

A case-insensitive string value of the command name. See Appendix D.

queryCommandIndeterm( ) NN n/a IE 4(Win) DOM n/a
queryCommandIndeterm("commandName")
Indicates whether the command is in an indeterminate state.

Returned Value

Boolean value: true | false.

Parameters

commandName

A case-insensitive string value of the command name. See Appendix D.

queryCommandState( ) NN n/a IE 4(Win) DOM n/a
queryCommandState("commandName")
Determines the current state of the named command.

Returned Value

true if the command has been completed; false if the command has not completed; null if the state cannot be accurately determined.

Parameters

commandName

A case-insensitive string value of the command name. See Appendix D.

queryCommandSupported( ) NN n/a IE 4(Win) DOM n/a
queryCommandSupported("commandName")
Determines whether the named command is supported by the document object.

Returned Value

Boolean value: true | false.

Parameters

commandName

A case-insensitive string value of the command name. See Appendix D.

queryCommandText( ) NN n/a IE 4(Win) DOM n/a
queryCommandText("commandName")
Returns text associated with the command.

Returned Value

String.

Parameters

commandName

A case-insensitive string value of the command name. See Appendix D.

queryCommandValue( ) NN n/a IE 4(Win) DOM n/a
queryCommandValue("commandName")
Returns the value associated with the command, such as the name font of the selection.

Returned Value

Depends on the command.

Parameters

commandName

A case-insensitive string value of the command name. See Appendix D.

select( ) NN n/a IE 4(Win) DOM n/a
Selects all the text that is included in the current TextRange object. This method brings some visual confirmation to users that a script knows about a particular block of text. For example, if you were scripting a search with the findText( ) method, you would then use the scrollIntoView( ) and select( ) methods on that range to show the user where the matching text is.

Returned Value

None.

Parameters

None.

setEndPoint( ) NN n/a IE 4(Win) DOM n/a
setEndPoint("type", comparisonRange)
Sets the end point of the current TextRange object to the end point of another range that had previously been preserved as a variable reference.

Returned Value

None.

Parameters

type

One of the following constants (as a string): StartToEnd | StartToStart | EndToStart | EndToEnd.

comparisonRange

A TextRange object created earlier and saved to a variable.

9.6. Alphabetical Object Reference

HTML Equivalent

Object Model Reference

Object-Specific Properties

Object-Specific Methods

Object-Specific Event Handler Properties

Example

Value

Default

Example

Value

Default

Example

Value

Default

Example

Value

Default

Example

Value

Default

Example

Value

Default

Example

Value

Default

Example

Value

Default

Example

Value

Default

Example

Value

Default

Example

Value

Default

Example

Value

Default

Example

Value

Default

Example

Value

Default

Example

Value

Default

Example

Value

Default

Example

Value

Default

Example

Value

Default

Value

Default

Value

Default

Example

Value

Default

Example

Value

Default

Example

Value

Default

Value

Default

Example

Value

Default

Example

Value