JavaScript Bible, Gold Edition part 56 ppsx

BODY Element Object For HTML element properties, methods, and event handlers, see Chapter 15.. Properties Methods Event Handlers alink createControlRange onAfterPrint background createTe

Trang 1

The other image trick is to be sure to specify HEIGHTand WIDTHattributes for every image, scripted or otherwise Navigator 2 requires these attributes (as does the HTML 4.0 specification), and document-rendering performance is improved on all platforms, because the values help the browser lay out elements even before their details are loaded

In addition to the document.write()example that follows (see Listings 18-16 through 18-18), you can find fuller implementations that use this method to assem-ble images and bar charts in many of the applications in Chapters 48 through 57 Because you can assemble any valid HTML as a string to be written to a window or frame, a customized, on-the-fly document can be as elaborate as the most complex HTML document that you can imagine

Example on the CD with Figure 18-2 and Listings 18-16, 18-17, and 18-18

Related Items: document.open(); document.close(); document.clear() methods

Event handlers

onSelectionChange

NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5

The onSelectionChangeevent can be triggered by numerous user actions, although all of those actions occur on elements that are under the influence of the IE5.5/Windows edit mode

Related Items:onControlSelectevent handler

onStop

The onStopevent fires in IE5 when the user clicks the browser’s Stop button Use this event handler to stop potentially runaway script execution on a page, because the Stop button does not otherwise control scripts after a page has loaded

If you are having a problem with a runaway repeat loop during development, you can temporarily use this event handler to let you stop the script for debugging

On the

CD-ROM

document.onStop

Trang 2

Example on the CD with Listing 18-19

Related Items: Repeat loops (Chapter 39).

BODY Element Object

For HTML element properties, methods, and event handlers, see Chapter 15

Properties Methods Event Handlers

alink createControlRange() onAfterPrint

background createTextRange() onBeforePrint

bgColor doScroll() onScroll

bgProperties

bottomMargin

leftMargin

link

noWrap

rightMargin

scroll

scrollLeft

scrollTop

text

topMargin

vLink

Syntax

Accessing BODY element object properties or methods:

[window.] document.body.property | method([parameters])

On the

CD-ROM

document.body

Trang 3

About this object

In object models that reveal HTML element objects, the BODY element object is the primary container of the content that visitors see on the page The BODY con-tains all rendered HTML This special place in the node hierarchy gives the BODY object some special powers, especially in the IE object model

As if to signify the special relationship, both the IE and W3C object models pro-vide the same shortcut reference to the BODY element: document.body As a first-class HTML element object (as evidenced by the long lists of properties, methods, and event handlers covered in Chapter 15), you are also free to use other syntaxes

to reach the BODY element

You are certainly familiar with several BODY element attributes that govern body-wide content appearance, such as link colors (in three states) and back-ground (color or image) But IE and NN (and the W3C so far) have some very differ-ent ideas about the BODY elemdiffer-ent’s role in scripting documdiffer-ents Many methods and properties that NN considers to be the domain of the window (for example, scrolling, inside window dimensions, and so forth), IE puts into the hands of the BODY element object Therefore, while NN scrolls the window (and whatever it may contain), IE scrolls the body (inside whatever window it lives) And because the BODY element fills the entire viewable area of a browser window or frame, that viewable rectangle is determined in IE by the body’s scrollHeightand scrollWidthproperties, whereas NN4+ features window.innerHeightand window.innerWidthproperties This distinction is important to point out because when you are scripting window- or document-wide appearance factors, you may have to look for properties and methods for the windowor BODY element object, depending on your target browser(s)

Use caution when referencing the document.body object while the page is load-ing The object may not officially exist until the page has completely loaded If you need to set some initial properties via scripting, do so in response to the onLoad event handler located in the <BODY> tag Attempts at setting BODY element object properties in immediate scripts inside the HEAD element may result in error messages about the object not being found

Properties

aLink

bgColor

link

text

vLink

Value: Hexadecimal triplet or color name string Read/Write

Note

document.body.aLink

Trang 4

The aLink, link, and vLinkproperties are the new versions of the document

properties alinkColor, linkColor, and vlinkColor The bgColoris the same as

the old document.bgColorproperty, while the textproperty is the new version of

the document.fgColorproperty These new properties are the scripted

equiva-lents of the HTML attributes for the BODY element — the property names more

closely align themselves with the HTML attributes than the old property names

Link colors that are set via pseudo-class selectors in style sheets (as STYLE

attributes of the BODY element) must be accessed via the styleproperty for the

BODY object Over time, these properties will likely fall into disuse as style sheets

become more common

Example on the CD

Related Items:document.alinkColor, document.bgColor, document.fgColor,

document.linkColor, document.vlinkColorproperties

background

Value: URL String Read/Write

The backgroundproperty lets you set or get the URL for the background image

(if any) assigned to the BODY element A BODY element’s background image

over-lays the background color in case both attributes or properties are set To remove

an image from the document’s background, set the document.body.background

property to an empty string

Example on the CD

Related Items:body.bgColor, body.bgPropertiesproperties

bgColor

See aLink

On the

CD-ROM

On the

CD-ROM

document.body.bgColor

Trang 5

The IE-specific bgPropertiesproperty is an alternative way of adjusting whether the background image should remain fixed when the user scrolls the docu-ment or if it should scroll with the docudocu-ment Initial settings for this behavior should be done via the background-attachmentCSS attribute and modified under script control by way of the BODY element’s style.backgroundAttachment property

No matter which way you reference this property, the only allowable values are string constants scroll(the default) or fixed

Example on the CD

Related Items:body.backgroundproperty

bottomMargin

leftMargin

rightMargin

topMargin

The four IE-specific margin properties are alternatives to setting the correspond-ing four margin style sheet attributes for the BODY element

(body.style.marginBottom, and so on) Style sheet margins represent blank space between the edge of an element’s content and its next outermost container

In the case of the BODY element, that container is an invisible document container

Of the four properties, only the one for the bottom margin may be confusing if the content does not fill the vertical space of a window or frame The margin value

is not automatically increased to accommodate the extra blank space

Different versions and operating system implementations of IE4+ offer a variety

of default integer values for these properties But be aware that their values are not necessarily returned by these properties unless they are explicitly set in the IE-proprietary BODY element attributes of the same name Therefore, even though a default BODY has a visible margin, the property does not return that default value

On the

CD-ROM

document.body.bottomMargin

Trang 6

Example on the CD

Related Items:styleobject

leftMargin

See bottomMargin

link

See aLink

noWrap

The noWrapproperty lets you modify the BODY element behavior normally set

via the NOWRAPattribute Because the property name is a negative, the Boolean

logic needed to control it can get confusing

The default behavior for a BODY element is for text to wrap within the width of

the window or frame This behavior occurs when the value of noWrapis its default

value of false By turning noWrapto true, a line of text continues to render past

the right edge of the window or frame until the HTML contains a line break (or end

of paragraph) If the text continues on past the right edge of the window, the

win-dow (or frame) gains a horizontal scrollbar (of course, not if a frame is set to not

scroll)

By and large, users don’t like to scroll in any direction if they don’t have to

Unless you have a special need to keep single lines intact, let the default behavior

rule the day

Example on the CD

Related Items: None.

rightMargin

See bottomMargin

On the

CD-ROM

On the

CD-ROM

document.body.rightMargin

Trang 7

The IE-specific scrollproperty provides scripted access to the IE-specific SCROLLattribute of a BODY element By default, an IE BODY element displays a ver-tical scrollbar even if the height of the content does not warrant it; a horizontal scrollbar appears only when the content is forced to be wider than the window or frame You can make sure that both scrollbars are hidden by setting the SCROLL attribute to “no” or changing it via script Possible values for this property are the constant strings yesand no

Other than frameattributes and NN4+ signed scripts, other browsers do not pro-vide facilities for turning off scrollbars under script control You can generate a new window (via the window.open()method) and specify that its scrollbars be hidden

Example on the CD

Related Items:window.scrollbarsproperty; window.open()method

scrollLeft

scrollTop

Even though the scrollLeftand scrollTopproperties of the BODY object are the same as those for generic HTML element objects, they play an important roll in determining the position of positioned elements (described more fully in Chapter 31) Because the mouse event and element position properties tend to be relative to the visible content region of the browser window, you must take the scrolling val-ues of the document.bodyobject into account when assigning an absolute posi-tion Values for both of these properties are integers representing pixels

Related Items:window.pageXOffset, window.pageYOffsetproperties

On the

CD-ROM

On the

CD-ROM

document.body.scrollLeft

Trang 8

See aLink

topMargin

See bottomMargin

vLink

See aLink

Methods

createControlRange()

Returns: Array.

This method is listed here for the sake of completeness Microsoft has so far

pro-vided few clues as to when or how to use a controlRangeobject, except that it has

something to do with a document in edit mode In regular document view mode, the

createControlRange()method (not implemented in IE5/Mac) returns an empty

array

createTextRange()

Returns:TextRangeobject

The BODY element object is the most common object to use to generate a

TextRangeobject in IE4+, especially when the text you are about to manipulate is

part of the document’s body text The initial TextRangeobject returned from the

createTextRange()method (not implemented in IE5/Mac) encompasses the

entire BODY element’s HTML and body text Further action on the returned object

is required to set the start and end point of the range See Chapter 19’s discussion

of the TextRangeobject for more details

Example on the CD

Related Items:TextRangeobject (Chapter 19)

On the

CD-ROM

document.body.createTextRange()

Trang 9

Returns: Nothing.

Use the doScroll()method (not implemented in IE5/Mac) to simulate user action on the scrollbars inside a window or frame that holds the current document This method comes in handy if you are creating your own scrollbars in place of the standard system scrollbars Scrolling is instantaneous, however, rather than with animation even if the Display control panel is set for animated scrolling The param-eter for this method is one of the string constant values shown in Table 18-6 In practice, occasionally the longer scroll action names more closely simulate an actual click on the scrollbar component, whereas the shortcut versions may scroll

at a slightly different increment

Table 18-6 document.body.doScroll() Parameters

Long Parameter Short Parameter Scroll Action Simulates

scrollbarDown down Clicking the down arrow.

scrollbarHThumb n/a Clicking the horizontal scrollbar

thumb (no scrolling action) scrollbarLeft left Clicking the left arrow.

scrollbarPageDown pageDown Clicking the page down area or

pressing PgDn (default).

scrollbarPageLeft pageLeft Clicking the page left area.

scrollbarPageRight pageRight Clicking the page right area scrollbarPageUp pageUp Clicking the page up area or

pressing PgUp.

scrollbarVThumb n/a Clicking the vertical scrollbar

thumb (no scrolling action).

Unlike scrolling to a specific pixel location (by setting the BODY element’s scrollTopand scrollLeftproperties), the doScroll()method depends entirely

on the spatial relationship between the body content and the window or frame size Also, the doScroll()method triggers the onScollevent handler for the BODY ele-ment object

Be aware that scripted modifications to body content can alter these spatial rela-tionships IE is prone to being sluggish in updating all of its internal dimensions after content has been altered Should you attempt to invoke the doScroll() method after such a layout modification, the scroll may not be performed as

document.body.doScroll()

Trang 10

expected You may find the common trick of using setTimeout()to delay the

invo-cation of the doScroll()method by a fraction of a second

Example on the CD

Related Items:body.scroll, body.scrollTop, body.scrollLeftproperties;

window.scroll(), window.scrollBy(), window.scrollTo()methods

Event handlers

onAfterPrint

onBeforePrint

See the onAfterPrintevent handler for the windowobject, Chapter 16

onScroll

The onScrollevent handler fires for the BODY element object as the result of

manual scrolling of the document (via scrollbars or navigation keyboard keys) and

scripted scrolling via the doScroll()method, scrollIntoView()method, or

adjusting the scrollTopand/or scrollLeftproperties of the BODY element

object For manual scrolling and scrolling by doScroll(), the event seems to fire

twice in succession Moreover, the event.srcElementproperty is null, even

when the BODY element is handling the onScrollevent handler

Related Items:body.scrollTop, body.scrollLeftproperties;

srcollIntoView(), body.doScroll()methods

On the

CD-ROM

On the

CD-ROM

document.body.onScroll

Định dạng
Số trang	10
Dung lượng	152,85 KB