div | NN 6 IE 4 DOM 1 | ||||
The div object reflects the div element. This element creates a block-level element often used for element positioning or containment grouping of several related elements. In the Windows version of IE 4, the client- and scroll-related properties are not available unless the div element has its position style attribute set to absolute. The client and scroll properties are active in IE for the Macintosh. |
|||||
HTML Equivalent | |||||
<div> |
|||||
Object Model Reference | |||||
[window.]document.getElementById("elementID")
|
|||||
Object-Specific Properties | |||||
|
|||||
Object-Specific Methods | |||||
None. |
|||||
Object-Specific Event Handler Properties | |||||
None. |
align | NN 6 IE 4 DOM 1 |
Read/Write | |
Defines the horizontal alignment of content within the element's box. Unless otherwise reined in, the box width is that of the next outermost positioning contextusually the body. |
|
Example | |
document.getElementById("myDIV").align = "center"; |
|
Value | |
Any of the three horizontal alignment constants: center | left | right. |
|
Default | |
left |
blur( ) | NN 2 IE 3 DOM 1 |
Removes focus from the current object, at which time the object's onblur event fires. Note that the range of elements capable of focus and blur (both the event and method) is limited in all browsers except for more recent versions of IE (see the shared tabindex attribute in Chapter 8). Most reliably for backward compatibility, apply the blur( ) method to blatantly focusable elements, such as text input and textarea elements. Assigning the attribute onfocus="this.blur( );" to a text input element, for instance, is a crude but effective backward-compatible way to largely disable a field for browsers that do not provide genuine element disabling. |
|
Use blur( ) and focus( ) methods in moderation on the same page. You can inadvertently trigger endless loops of blurring and focusing if alert dialog boxes are involved along the way. Moreover, be aware that when you invoke the blur( ) method on one object, some other object (perhaps the window object) receives an onfocus event. |
|
Parameters | |
None. |
|
Returned Value | |
None. |
clientHeight, clientWidth | NN 7 IE 4 DOM n/a |
Read-only | |
Broadly speaking, these provide the height and width of the element's content, but with minor variations with respect to element padding among various operating system versions of IE and compatibility modes controlled by the DOCTYPE declaration. Not available for all element types in IE for Macintosh. For Netscape 7, values are zero except when an element's content overflows the viewable area, in which case the values reveal the dimensions of the viewable area (e.g., the browser window's content region for the document.body element). See the Section 9.2 at the beginning of this chapter for details. |
|
Example | |
var midHeight = document.body.clientHeight/2; |
|
Value | |
Integer pixel value. |
|
Default | |
0 |
clientLeft, clientTop | NN n/a IE 4 DOM n/a |
Read-only | |
Broadly speaking, these provide the left and top coordinates of the element's content within the box that includes the element's padding, but with minor variations among various operating system versions of IE. Not available for all element types in IE for Macintosh. See the Section 9.2 at the beginning of this chapter for details. More useful information for inline element positioning generally comes from the offsetLeft and offsetTop properties (including Netscape 6). For CSS-positioned elements (including changing an element's position), use style object properties, such as left and top, and (in IE only) pixelLeft and pixelTop. |
|
Value | |
Integer pixel value. |
|
Default | |
0 |
contentEditable | NN n/a IE 5.5(Win) DOM n/a |
Read/Write | |
Controls whether the element is editable by the user via the IE for Windows live content-editing facilities. User changes are not preserved on the server without intervention by the server, usually via client-side script capture of modified content and submission via form. Scripts should alter the appearance of an element (border, background color, etc.) when in edit mode to highlight the mode for the user. By default, all child elements inherit the edit mode setting of an element. See the onmove event handler in Chapter 10 for an extended example. |
|
Example | |
document.getElementById("elementID").contentEditable = "true";
|
|
Value | |
String constant: false | inherit | true. |
|
Default | |
inherit |
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 div element's content. 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 for text data sources in IE 5 for the Macintosh. |
|
Example | |
document.getElementById("myDiv").dataFld = "comment"; |
|
Value | |
Case-sensitive identifier of the data source column. |
|
Default | |
None. |
dataFormatAs | NN n/a IE 4 DOM n/a |
Read/Write | |
Used with IE data binding, this property advises the browser whether the source material arriving from the data source is to be treated as plain text or as tagged HTML. |
|
Example | |
document.getElementById("myDiv").dataFormatAs = "text"; |
|
Value | |
String constants: text | html. |
|
Default | |
text |
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. |
|
Example | |
document.getElementById("myDiv").dataSrc = "DBSRC3"; |
|
Value | |
Case-sensitive identifier of the data source. |
|
Default | |
None. |
focus( ) | NN 2 IE 3 DOM 1 |
Gives focus from the current object, at which time the object's onfocus event fires. Note that the range of elements capable of focus and blur (both the event and method) is limited in all browsers except for more recent versions of IE (see the shared tabindex attribute in Chapter 8). Most reliably for backward compatibility, apply the focus( ) method to blatantly focusable elements, such as text input and textarea elements. |
|
To give a text box focus and pre-select all the text in the box, use the sequence of focus( ) and select( ) methods on the element. If this sequence is to occur after windows change (such as after an alert dialog box closes), place the methods in a separate function, and invoke this function through the setTimeout( ) method following the alert( ) method for the dialog. This allows IE/Windows to sequence statement execution correctly. |
|
Parameters | |
None. |
|
Returned Value | |
None. |
noWrap | NN n/a IE 4 DOM n/a |
Read/Write | |
Specifies whether the browser should render the element 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. The corresponding attribute is deprecated. |
|
Example | |
document.getElementById("wideDiv").noWrap = "true"; |
|
Value | |
Boolean value: true | false. |
|
Default | |
false |
scrollHeight, scrollWidth | NN 7 IE 4 DOM n/a |
Read-only | |
Originally implemented in IE 4 for elements that either scrolled or influenced an element's scroll (body, button, caption, div, fieldset, legend, marquee, and textarea), these properties return the pixel dimensions of an element, including elements that are larger than the viewable area in the browser window. This is in contrast to the clientHeight and clientWidth properties for scrollable elements, which return dimensions of only visible portions of the element. IE for the Macintosh, however, interprets the intent of the scroll- properties differently, returning the dimensions of the visible portion. |
|
Starting in IE 5 for Windows, all HTML elements have these properties, and the values for nonscrolling elements are the same as the offsetHeight and offsetWidth properties. Netscape 7 implements these properties for all elements, returning the height and width of the element, whether or not it's in view. The important point is that for key elements, such as the body, the properties mean different things and can disrupt cross-platform operation. |
|
Example | |
var midPoint = document.body.scrollHeight/2; |
|
Value | |
Positive integer or zero. |
|
Default | |
None. |
scrollLeft, scrollTop | NN 7 IE 4 DOM n/a |
Read/Write | |
Provide the distance in pixels between the actual left or top edge of the element's physical content and the left or top edge of the visible portion of the content. Setting these properties allows you to use a script to adjust the scrolling of content within a scrollable container, such as text in a textarea element or an entire document in the browser window or frame. When the content is not scrolled, both values are zero. Setting the scrollTop property to 15 scrolls the document upward by 15 pixels in the window; the scrollLeft property is unaffected unless explicitly changed. The property values change as the user adjusts the scrollbars. This is important for some event-driven positioning tasks in IE for Windows because the coordinate system for event offset measurements are with respect to the visible area of a page in the browser window. You must add document.body scrolling factors to align event coordinates with body content positions (see the element dragging example in Chapter 6). Starting with IE 5 for Windows, the scrollLeft and scrollTop properties are available for all HTML element objects, but values for unscrollable elements are zero. |
|
Example | |
document.body.scrollTop = 40; |
|
Value | |
Positive integer or zero. |
|
Default | |
0 |