JavaScript Bible, Gold Edition part 203 doc

OPTION Element ObjectProperties label NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5 Example The following statement modifies the text that appears as the selected text in a pop-up list: d

Trang 1

OPTION Element Object

Properties

label

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

Example

The following statement modifies the text that appears as the selected text in a

pop-up list:

document.forms[0].mySelect.options[3].label = “Widget 9000”

If this option is the currently selected one, the text on the pop-up list at rest changes to the new label.

OPTGROUP Element Object

Properties

label

Example

I present Listing 26-9 in the hope that Microsoft and Netscape will eventually eradicate the bugs that afflict their current implementations of the labelproperty When the feature works as intended, Listing 26-9 demonstrates how a script can alter the text of option group labels This page is an enhanced version of the background color setters used in other examples of this chapter Be aware that

OPTGROUP.label

Trang 2

IE5/Mac does not alter the last OPTGROUP element’s label, and NN6 achieves only a

partial change to the text displayed in the SELECT element

Listing 26-9: Modifying OPTGROUP Element Labels

<HTML>

<HEAD>

<TITLE>Color Changer 3</TITLE>

var regularLabels = [“Reds”,”Greens”,”Blues”]

var naturalLabels = [“Apples”,”Leaves”,”Sea”]

function setRegularLabels(list) {

var optGrps = list.getElementsByTagName(“OPTGROUP”)

for (var i = 0; i < optGrps.length; i++) {

optGrps[i].label = regularLabels[i]

}

function setNaturalLabels(list) {

var optGrps = list.getElementsByTagName(“OPTGROUP”)

for (var i = 0; i < optGrps.length; i++) {

optGrps[i].label = naturalLabels[i]

}

function seeColor(list) {

var newColor = (list.options[list.selectedIndex].value)

if (newColor) {

document.bgColor = newColor

}

</SCRIPT>

</HEAD>

<FORM>

<P>Choose a background color:

<OPTION value=”#ff9999”>Light Red

<OPTION value=”#ff3366”>Medium Red

<OPTION value=”#ff0000”>Bright Red

<OPTION value=”#660000”>Dark Red

</OPTGROUP>

<OPTION value=”#ccff66”>Light Green

<OPTION value=”#99ff33”>Medium Green

<OPTION value=”#00ff00”>Bright Green

<OPTION value=”#006600”>Dark Green

</OPTGROUP>

Continued

OPTGROUP.label

Trang 3

Listing 26-9 (continued)

<OPTION value=”#ccffff”>Light Blue

<OPTION value=”#66ccff”>Medium Blue

<OPTION value=”#0000ff”>Bright Blue

<OPTION value=”#000066”>Dark Blue

</OPTGROUP>

</SELECT></P>

<P>

<INPUT TYPE=”radio” NAME=”labels” CHECKED onClick=”setRegularLabels(this.form.colorsList)”>Regular Label Names

<INPUT TYPE=”radio” NAME=”labels”

onClick=”setNaturalLabels(this.form.colorsList)”>Label Names from Nature</P>

</FORM>

</BODY>

</HTML>

Chapter 27 Examples

The following sections contain examples from Chapter 27, “Table and List Objects.”

TABLE Element Object

Properties

align

Example

Use The Evaluator (Chapter 13) to see the alignproperty at work The default value (left) is in force when the page loads But you can shift the table to right-align with

TABLE.align

Trang 4

the body by entering the following statement into the top text box for IE5+

and NN6+:

document.getElementById(“myTable”).align = “right”

background

Example

Treat the backgroundproperty of a table like you do the srcproperty of an IMG

element object If you precache an image, you can assign the srcproperty of the

precached imageobject to the backgroundproperty of the table for quick image

changing Such an assignment statement looks like the following:

document.all.myTable.background = imgArray[“myTableAlternate”].src

bgColor

Example

Use The Evaluator (Chapter 13) to assign a color to the table After looking at the

table to see its initial state, enter the following IE5+/NN6+ statement into the top

text box:

document.getElementById(“myTable”).bgColor = “lightgreen”

When you look at the table again, you see that only some of the cells turned to

green This is because colors also are assigned to table elements nested inside the

outermost table element, and the color specification closest to the actual element

wins the context.

TABLE.bgColor

Trang 5

Example

To remove all traces of an outside border of a table (and, in some combinations of attributes of other table elements, borders between cells), use the following state-ment (in IE5+/NN6+ syntax):

document.getElementById(“myTable”).border = 0

borderColor borderColorDark borderColorLight

Example

Assuming that you have set the initial light and dark color attributes of a table, the following function swaps the light and dark colors to shift the light source to the opposite corner:

function swapColors(tableRef) { var oldLight = tableRef.borderColorLight tableRef.borderColorLight = tableRef.borderColorDark tableRef.borderColorDark = oldLight

}

While you can easily invoke this function over and over by ending it with a

setTimeout()method that calls this function after a fraction of a second, the results are very distracting to the person trying to read your page Please don’t do it.

TABLE.borderColor

Trang 6

Example

The following example, for use with The Evaluator (Chapter 13) in NN6+,

demon-strates the sequence of assigning a new CAPTION element object to a table While

the table in The Evaluator already has a CAPTION element, the following statements

replace it with an entirely new one Enter each of the following statements into the

top text box, starting with the one that saves a long reference into a variable for

multiple use at the end:

t = document.getElementById(“myTable”)

a = document.createElement(“CAPTION”)

b = document.createTextNode(“A Brand New Caption”)

a.appendChild(b)

t.replaceChild(a, t.caption)

A view of the table shows that the new caption has replaced the old one because a

table can have only one CAPTION element.

cellPadding

cellSpacing

Example

Use The Evaluator (Chapter 13) to adjust the cellPaddingand cellSpacing

prop-erties of the demonstrator table First, adjust the padding (IE5+/NN6 syntax):

document.getElementById(“myTable”).cellPadding = 50

Now, adjust the cell spacing:

document.getElementById(“myTable”).cellSpacing = 15

Notice how cellSpacingaffected the thickness of inter-cell borders.

TABLE.cellPadding

Trang 7

Example

Use The Evaluator with IE5+ for Windows to have JavaScript calculate the number

of columns in the demonstrator table with the help of the cellsand rows proper-ties Enter the following statement into the top text box:

document.all.myTable.cells.length/document.all.myTable.rows.length

The result is the number of columns in the table.

dataPageSize

Example

If you want to change the number of visible rows of linked data in the table to 15, use the following statement:

document.all.myTable.dataPageSize = 15

frame

Example

Listing 27-4 presents a page that cycles through all possible settings for the frame

property The frameproperty value is displayed in the table’s caption (Early ver-sions of NN6 might fail to refresh part of the page after adjusting the frameproperty.)

TABLE.frame

Trang 8

Listing 27-4: Cycling Through Table frame Property Values

<HTML>

<HEAD>

<TITLE>TABLE.frame Property</TITLE>

var timeoutID

var frameValues = [“box”, “above”, “rhs”, “below”, “lhs”, “hsides”, “vsides”,

“border”, “void”]

function rotateBorder(i) {

document.getElementById(“myTABLE”).frame = frameValues[i]

document.getElementById(“myCAPTION”).innerHTML = frameValues[i]

i = (++i == frameValues.length) ? 0 : i

timeoutID = setTimeout(“rotateBorder(“ + i + “)”, 2000)

}

function stopRotate() {

clearTimeout(timeoutID)

document.getElementById(“myTABLE”).frame = “box”

document.getElementById(“myCAPTION”).innerHTML = “box”

}

</SCRIPT>

</HEAD>

<BODY>

<H1>TABLE.frame Property</H1>

<HR>

<LEGEND>Cycle Table Edge Visibility</LEGEND>

</TR>

</TABLE>

</FIELDSET>

</TABLE>

</FIELDSET>

</FORM>

<HR>

<CAPTION ID=”myCAPTION”>Default</CAPTION>

<TR>

<TH>River<TH>Outflow<TH>Miles<TH>Kilometers

</TR>

Continued

TABLE.frame

Trang 9

Listing 27-4 (continued)

</THEAD>

<TBODY>

<TR>

<TD>Nile<TD>Mediterranean<TD>4160<TD>6700

</TR>

<TR>

<TD>Congo<TD>Atlantic Ocean<TD>2900<TD>4670

</TR>

<TR>

<TD>Niger<TD>Atlantic Ocean<TD>2600<TD>4180

</TR>

<TR>

<TD>Zambezi<TD>Indian Ocean<TD>1700<TD>2740

</TR>

</TABLE>

</BODY>

</HTML>

height width

Example

Use The Evaluator (Chapter 13) to adjust the width of the demonstrator table Begin by increasing the width to the full width of the page:

document.getElementById(“myTable”).width = “100%”

To restore the table to its minimum width, assign a very small value to the property:

document.getElementById(“myTable”).width = 50

If you have IE4+, you can perform similar experiments with the heightproperty of the table.

TABLE.height

Trang 10

Example

Use The Evaluator to examine the number of rows in the demonstrator table Enter

the following statement into the top text box:

document.getElementById(“myTable”).rows.length

In contrast, notice how the rowsproperty sees only the rows within the

demonstra-tor table’s TBODY element:

document.getElementById(“myTbody”).rows.length

rules

Example

Listing 27-5 presents a page that cycles through all possible settings for the rows

property The rowsproperty value is displayed in the table’s caption When you run

this script, notice the nice border display for this table’s combination of

COL-GROUP and table row segment elements Early versions of NN6 may not render the

altered table correctly, and scripted changes won’t appear on the page.

Listing 27-5: Cycling Through Table rows Property Values

<HTML>

<HEAD>

<TITLE>TABLE.rules Property</TITLE>

Continued

TABLE.rules

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