JavaScript Bible, Gold Edition part 28 doc

currentStyle NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5 Every element has style attributes applied to it, even if those attributes are the browser’s default settings.. The value you ass

Trang 1

IE5.5 introduces the concept of editable HTML content on a page Element tags can include a CONTENTEDITABLEattribute, whose value is echoed via the

contentEditableproperty of the element The default value for this property is

inherit, which means that the property inherits whatever setting this property has in the hierarchy of HTML containers outward to the body If you set the

contentEditableproperty to true, then that element and all nested elements set

to inherit the value become editable; conversely, a setting of falseturns off the option to edit the content

Example (with Listing 15-7) on the CD-ROM

Related Item:isContentEditableproperty

currentStyle

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

Every element has style attributes applied to it, even if those attributes are the browser’s default settings Because an element’s styleobject reflects only those properties whose corresponding attributes are explicitly set via CSS statements, you cannot use the styleproperty of an elementobject to view default style set-tings applied to an element That’s where the currentStyleproperty comes in This property returns a read-only styleobject that contains values for every possible styleproperty applicable to the element If a styleproperty is explicitly set via CSS statement or script adjustment, the current reading for that property is also available here Thus, a script can inquire about any property to determine if it should change to meet some scripted design goal For example, if you surround some text with an tag, the browser by default turns that text into an italic font style This setting is not reflected in the element’s styleobject (fontStyle prop-erty) because the italic setting was not set via CSS; in contrast, the element

object’s currentStyle.fontStyleproperty reveals the true, current fontStyle

property of the element as italic

To change a styleproperty setting, access it via the element’s styleobject

Example on the CD-ROM

Related Items:runtimeStyle, styleobjects (Chapter 30)

On the

CD-ROM

On the

CD-ROM

elementObject.currentStyle

Trang 2

dataFormatAs

dataSrc

The dataFld, dataFormatAs, and dataSrcproperties (along with more

element-specific properties such as dataPageSizeand recordNumber) are part of the

Internet Explorer data-binding facilities based on ActiveX controls The Win32

ver-sions of IE4 and later have several ActiveX objects built into the browsers that

facili-tate the direct communication between a Web page and a data source Data sources

include text files, XML data, HTML data, and external databases Data binding is a

very large topic, much of which extends more to discussions about Microsoft Data

Source Objects (DSOs), ODBC, and JDBC — subjects well beyond the scope of this

book But data binding is a powerful tool and can be of use even if you are not a

database guru Therefore, this discussion of the three primary properties —

dataFld, dataFormatAs, and dataSrc— briefly covers data binding through

Microsoft’s Tabular Data Control DSO This allows any page to access, sort, display,

and filter (but not update) data downloaded into a Web page from an external text

file (commonly comma- or tab-delimited data)

You can load data from an external text file into a document with the help of

the Tabular Data Control (TDC) You retrieve the data by specifying the TDC object

within an <OBJECT>tag set and specifying additional parameters such as the URL of

the text file and field delimiter characters The OBJECT element can go anywhere

within the BODY of your document (I tend to put it at the bottom of the code so

that all normal page rendering happens before the control loads.) Retrieving the

data simply brings it into the browser and does not, on its own, render the data on

the page

If you haven’t worked with embedded objects in IE, the CLASSIDattribute value

might seem a bit strange The most perplexing part to some is the long value of

numeric data signifying the Globally Unique Identifier (GUID) for the object You

must enter this value exactly as shown in the following example for the proper

ActiveX TDC to run The HTML syntax for this object is as follows:

<OBJECT ID=”objName” CLASSID=”clsid:333C7BC4-460F-11D0-BC04-0080C7055A83”>

<PARAM NAME=”DataURL” VALUE=”URL”>

[additional optional parameters]

</OBJECT>

Table 15-3 lists the parameters available for the TDC Only the DataURL

param-eter is required; others — such as FieldDelim, UseHeader, RowDelim, and

EscapeChar— may be helpful depending on the nature of the data source

elementObject.dataFld

Trang 3

Table 15-3 Tabular Data Control Parameters

CharSet Character set of the data source file Default is latin1.

DataURL URL of data source file (relative or absolute).

EscapeChar Character used to “escape” delimiter characters that are part of the

data Default is empty A common value is “\”.

FieldDelim Delimiter character between fields within a record Default is comma

(,) For a Tab character, use a value of 	.

Language ISO language code of source data Default is en-us.

TextQualifier Optional character surrounding a field’s data Default is empty RowDelim Delimiter character between records Default is newline (NL).

UseHeader Set to true if the first row of data in the file contains field names.

Default is false.

The value you assign to the OBJECT element’s IDattribute is the identifier that your scripts use to communicate with the data after the page and data completely load You can therefore have as many uniquely named TDCs loaded in your page as there are data source files you want to access at once

The initial binding of the data to HTML elements usually comes when you assign values to the DATASRCand DATAFLDattributes of the elements The DATASRC

attribute points to the DSOidentifier (matching the IDattribute of the OBJECT ele-ment, preceded with a hash symbol), while the DATAFLDattribute points to the name of the field whose data should be extracted When you use data binding with

an interactive element such as a table, multiple records are displayed in consecu-tive rows of the table (more about this in a moment)

Adjust the dataSrcand dataFldproperties if you want the same HTML element (other than a table) to change the data that it displays These properties apply to a subset of HTML elements that can be associated with external data: A, APPLET, BODY, BUTTON, DIV, FRAME, IFRAME, IMG, INPUT (most types), LABEL, MARQUEE, OBJECT, PARAM, SELECT, SPAN, and TEXTAREA objects

In some cases, your data source may store chunks of HTML-formatted text for rendering inside an element Unless directed otherwise, the browser renders a data source field as plain text — even if the content contains HTML formatting tags But

if you want the HTML to be observed during rendering, you can set the

dataFormatAsproperty (or, more likely, the DATAFORMATASattribute of the tag) to

HTML The default value is text

Example (with Listings 15-8 and 15-9) on the CD-ROM

On the

CD-ROM

elementObject.dataFld

Trang 4

Related Items:recordNumber, TABLE.dataPageSizeproperties.

dir

The dirproperty (based on the DIRattribute of virtually every text-oriented

HTML element) controls whether an element’s text is rendered left-to-right (the

default) or right-to-left Depending on the default language and character set of the

IE5 browser running a page, selecting a value other than the default may require the

user to install Microsoft’s Uniscribe add-in component By and large, this property

(and HTML attribute) is necessary only when you need to override the default

directionality of a language’s character set as defined by the Unicode standard

Related Item:langproperty

disabled

While some elements have a disabledproperty in IE4, IE5, and NN6, this

prop-erty is associated with every HTML element in IE5.5 Disabling an HTML element

(like form elements) usually gives the element a “dimmed” look, indicating that it is

not active A disabled element does not receive any events It also cannot receive

focus, either manually or by script (although disabled text fields in IE4/Mac errantly

manage to receive focus) But a user can still select and copy a disabled body text

element

If you disable a form control element, the element’s data is not submitted to the

server with the rest of the form elements If you need to keep a form control

“locked down,” but still submit it to the server, use the FORM element’s onSubmit

event handler to enable the form control right before the form is submitted

Note

On the

CD-ROM

elementObject.disabled

Trang 5

Related Item:isDisabledproperty

document

In the context of HTML element objects as exposed in IE4+, the document prop-erty is a reference to the document that contains the object While it is unlikely that you will need to use this property, documentmay come in handy for complex scripts and script libraries that handle objects in a generic fashion and do not know the reference path to the document containing a particular object You might need a ref-erence to the document to inspect it for related objects The W3C version of this property (implemented in IE5/Mac but not in IE5.5/Windows) is ownerDocument

Related Item:ownerDocumentproperty

filters

Filters are IE-specific style sheet add-ons that offer a greater variety of font

ren-dering (such as drop shadows) and transitions between hidden and visible ele-ments Each filter specification is a filterobject The filtersproperty contains

an array of filterobjects defined for the current element You can apply filters to the following set of elements: BODY, BUTTON, IMG, INPUT, LI, MARQUEE, OL, TABLE, TD, TEXTAREA, TH, UL, and positioned DIV and SPAN elements See Chapter

30 for details about style sheet filters

Related Item:filterobject

On the

CD-ROM

On the

CD-ROM

elementObject.filters

Trang 6

lastChild

W3C DOM-based document object models are built around an architecture

known as a node map Each object defined by HTML is a node in the map A node

has relationships with other nodes in the document — relationships described in

family terms of parents, siblings, and children

A child node is an element that is contained by another element The container is

the parent of such a child Just as an HTML element can contain any number of child

elements, so can a parent object have zero or more children A list of those children

(returned as an array) can be read from an object by way of its childNodes

property:

var nodeArray = document.getElementById(“elementID”).childNodes

While you can use this array (and its lengthproperty) to get a reference to the

first or last child node, the firstChildand lastChildproperties offer shortcuts

to those positions These are helpful when you wish to insert a new child before or

after all of the others and you need a reference point for the IE

insertAdjacentElement()method or other method that adds elements to the

document’s node list

See the discussion of the childNodes property earlier in this chapter about the

presence of “phantom” nodes in some browser versions The problem may

influ-ence your use of the firstChild and lastChild properties

Related Items:nextSibling, parentElement, parentNode, previousSibling

properties; appendChild(), hasChildNodes(), removeChild(), removeNode(),

replaceChild(), replaceNode()methods

On the

CD-ROM

Caution

elementObject.firstChild

Trang 7

width

Value: Integer or Percentage String Read/Write and Read-Only

The heightand widthproperties described here are not the identically named properties that belong to an element’s style Rather, these properties reflect the values normally assigned to HEIGHTand WIDTHattributes of elements such as IMG, APPLET, and TABLE, and so on As such, these properties are accessed directly from the object (for example, document.all.myTable.widthin IE4+) rather than through the styleobject (for example, document.all.myDIV.style.width)

Only elements for which the HTML 4.x standard provides HEIGHTand WIDTH

attributes have the corresponding properties

Values for these properties are either integer pixel values (numbers or strings)

or percentage values (strings only) If you need to perform some math on an exist-ing percentage value, use the parseInt()function to extract the numeric value for use with math calculations If an element’s HEIGHTand WIDTHattributes are set as percentage values, you can use the clientHeightand clientWidthproperties in IE4+ to get the rendered pixel dimensions

Property values are read/write for the imageobject in most recent browser ver-sions because you can resize an imageobject in IE4+ and NN6 after the page loads Properties are read/write for some other objects (such as the TABLE object) — but not necessarily all others that support these properties

Support for these properties in NN4 is limited to the IMAGE object In that browser, both properties are read-only

In general, you cannot set the value of these properties to something less than is required to render the element This is particularly true of a table If you attempt to set the heightvalue to less than the amount of pixels required to display the table

as defined by its style settings, your changes have no effect (even though the prop-erty value retains its artificially low value) For other objects, however, you can set the size to anything you like and the browser scales the content accordingly (images, for example) If you want to see only a segment of an element (in other words, to crop the element), use a style sheet to set the element’s clipping region

Related Items:clientHeight, clientWidthproperties; style.height,

style.widthproperties

On the

CD-ROM

elementObject.height

Trang 8

In IE for Windows, button types of form controls and links display a dotted

rect-angle around some part of the element whenever that element has focus If you set

the TABINDEXattribute or tabIndexproperty of any other kinds of elements in

IE5+, they, too, display that dotted line when given focus You can still let an

ele-ment receive focus, but hide that dotted line, by setting the hideFocusproperty of

the element object to true(default value is false)

Hiding focus does not disable the element In fact, if the element about to receive

focus is scrolled out of view, the page scrolls to bring the element into view Form

controls that respond to keyboard action (for example, pressing the spacebar to

check or uncheck a checkbox control) also continue to work as normal For some

designers, the focus rectangle harms the design goals of the page The hideFocus

property gives them more control over the appearance while maintaining

consis-tency of operation with other pages There is no corresponding HTML attribute for

a tag, so you can use an onLoadevent handler in the page to set the hideFocus

property of desired objects after the page loads

Related Items:tabIndexproperty; srcollIntoView()method

id

The idproperty returns the identifier assigned to an element’s IDattribute in

the HTML code A script cannot modify the ID of an existing element nor assign an

ID to an element that lacks one But if a script creates a new element object, an

identifier may be assigned to it by way of the idproperty

On the

CD-ROM

elementObject.id

Trang 9

Related Item:classNameproperty

innerHTML

innerText

One way that Internet Explorer exposes the contents of an element is through the innerHTMLand innerTextproperties (Navigator 6 offers only the innerHTML

property.) All content defined by these “inner” properties consists of document data that is contained by an element’s start and end tags, but not including the tags themselves (see outerTextand outerHTMLproperties) Setting these inner proper-ties is a common way to modify a portion of a page’s content after the page loads The innerHTMLproperty contains not only the text content for an element as seen on the page, but also every bit of HTML tagging that is associated with that content (If there are no tags in the content, the text is rendered as is.) For example, consider the following bit of HTML source code:

”How are you?” he asked.

The value of the paragraph object’s innerHTMLproperty (document.all paragraph1.innerHTML) is:

“How are you?” he asked.

The browser interprets any HTML tags that you include in a string you assign to

an element’s innerHTMLproperty as tags This also means that you can introduce entirely new nested elements (or child nodes in the modern terminology) by assign-ing a slew of HTML content to an element’s innerHTMLproperty The document’s object model adjusts itself to the newly inserted content

In contrast, the innerTextproperty knows only about the text content of an element container In the example you just saw, the value of the paragraph’s

innerTextproperty (document.all.paragraph1.innerText) is:

“How are you?” he asked.

It’s important to remember that if you assign a string to the innerTextproperty

of an element and that string contains HTML tags, the tags and their angle brackets appear in the rendered page and are not interpreted as live tags

Do not modify the innerHTMLproperty to adjust the HTML for FRAMESET, HTML,

HEAD, TITLE, or table-related objects You should modify table constructions through the various table-related methods that create or delete rows, columns, and

On the

CD-ROM

elementObject.innerHTML

Trang 10

cells (see Chapter 27) It is safe, however, to modify the contents of a cell by setting

its innerHTMLor innerTextproperties

When the HTML you insert includes a <SCRIPT>tag, be sure to include the

DEFERattribute to the opening tag This even goes for scripts that contain function

definitions, which you might consider to be deferred automatically

If your audience includes Internet Explorer 4 for the Macintosh, know that

sev-eral elements do not support these properties Be sure to test your page thoroughly

on this platform combination Also, if you want to have the convenience of the

innerTextproperty in Navigator 6, see Chapter 14 for instructions on how to add

that property to all elements Alternatively, you can use the NN6-compatible

innerHTMLproperty to assign new text content to an element, even though the

content contains no HTML tags

Related Items:outerHTML, outerTextproperties; replaceNode()method

isContentEditable

The isContentEditableproperty returns a Boolean value indicating whether a

particular element object is set to be editable (see the preceding discussion of the

contentEditableproperty) This property is helpful because if a parent element’s

contentEditableproperty is set to true, a nested element’s contentEditable

property likely is set to its default value inherit But because its parent is

editable, the isContentEditableproperty of the nested element returns true

Related Item:contentEditableproperty

isDisabled

On the

CD-ROM

On the

CD-ROM

elementObject.isDisabled

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